在新版 HTML5 的标准中, 针对表单的文件上传, 浏览器提供了 File 和 FileReader 两个对象, 让我们可以获得到文件信息和读取文件.

File

当选择一个文件时，可以获得这个文件的描述对象

  1. <input type="file" id="file" />
  3. <script>
  4.   const file = document.getElementById('file')
  5.   file.addEventListener('change', (e) => {
  6.     console.dir(e.target.files[0])
  7.   })
  8. </script>
  1. File
  2.   lastModified: 1646398643613
  3.   lastModifiedDate: Fri Mar 04 2022 20:57:23 GMT+0800 (中国标准时间) {}
  4.   name: "world6.jpg"
  5.   size: 1179107
  6.   type: "image/jpeg"
  7.   webkitRelativePath: ""
  8.   [[Prototype]]: File

例子：

  1. <form action="?" method="post" enctype="multipart/form-data">
  2.  <input type="file" onchange="return file()"> <!-- 当用户上传了的图片, 把图片设置成 body 的背景 -->
  3.  <input type="submit">
  4. </form>
  5. <script type="text/javascript">
  6.  function file() {
  7.   var f = document.querySelector('input[type=file]')
  8.   var body = document.querySelector('body')
  9.   // f.files[0] 图片信息 name,type,size ...
  10.   // FileReader 载入图像
  11.   reader = new FileReader()
  12.   //回调 readAsDataURL
  13.   reader.onload = function(e) { 
  14.    body.style.backgroundImage = 'url(' + e.target.result + ')'
  15.   }
  16.   reader.readAsDataURL(f.files[0])
  17.  }
  18. </script>

通过 FIle API设置完成的背景图片, 我们通过 Chrome 开发者工具 查看, 可以看见, 图片的地址其实是我们本地的图片, 转换成一组 Base64 编码 | 参考 - Base64.

常用操作

获取文件后缀名

  1. /**
  2.  * 获取文件后缀名
  3.  * @param {String} filename
  4.  */
  5.  export function getExt(filename) {
  6.     if (typeof filename == 'string') {
  7.         return filename
  8.             .split('.')
  9.             .pop()
  10.             .toLowerCase()
  11.     } else {
  12.         throw new Error('filename must be a string type')
  13.     }
  14. }
  15. getExt("1.mp4") //->mp4


参考

File 对象，FileList 对象，FileReader 对象