input类型为 file 的相关知识点总结和使用

input类型为 file 的相关知识点

type为file的是文件上传的类型。使用户可以选择一个或多个元素以提交表单的方式上传到服务器上。

<input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg" multiple required>

1.常用的三个属性

• accept 属性接受一个逗号分隔的 MIME 类型字符串，如：accept=“image/png, image/jpeg” or accept=".png, .jpg, .jpeg"
• multiple（html5的属性）：这个属性指示用户能否输入多个值。这个属性仅在type属性为email或file的时候生效 ; 否则被忽视。（兼容性 >ie9 2019年3月25日）
• required（html5的属性）： 指定用户在提交表单之前必须为该元素填充值.（兼容性 >ie9 2019年3月25日）

2.FileList对象

通过 获取dom元素来获得。如下：

<input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg" multiple required>
// 获取dom 对象
let file = document.getElementById("avatar");
// FileList 对象如下：
let fileList = file.files;  // 表示 fileList 对象集合

FileList 包含 File 对象。
File对象的值包含如下：（只读）

• name：文件名
• lastModified：UNIX timestamp 形式的最后修改时间
• lastModifiedDate： Date 形式的最后修改时间
• size：文件的字节大小
• type：文件的MIME类型

3.Blob对象

定义：表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。
生成 Blob 对象有两种方法：一种是使用 Blob 构造函数，另一种是对现有的 Blob 对象使用 slice 方法切出一部分。
如下：

//1. 构造函数
new Blob(blobParts[, options])

//2. slice方法
Blob.slice([start,[ end ,[contentType]]])

4.FileReader 对象（兼容 ie10 以上）

定义： 允许程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据（为参数）。

let reader = new FileReader();

属性有：

• error: 表示读取文件发生的错误。
• readyState: 表示状态的数字。 EMPTY(0)：未加载。 LOADING(1)：正在加载。 DONE(2)：加载完成。
• result: 文件的内容。 该属性仅在读取操作完成后才有效

事件处理（继承自EventTarget）:

• onabort：该事件在读取操作被中断时触发。
• onerror：该事件在读取操作发生错误时触发。
• onload： 该事件在读取操作完成时触发。
• onloadstart：该事件在读取操作开始时触发。
• onloadend：该事件在读取操作结束时 （要么成功，要么失败）触发。
• onprogress： 该事件在读取Blob时触发。

方法：

• abort()：中止读取操作。在返回时，readyState属性为DONE
• readAsArrayBuffer()：开始读取指定的 Blob中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象.即blob 格式
• readAsDataURL()：开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容。即base64 的格式
• readAsText()：开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个字符串以表示所读取的文件内容

5.上传文件的案例（简单版的）

// html 
<input type="file" id="avatar" name="avatar" value="" accept="image/png, image/jpeg" multiple required>

// js代码
	(function () {
      let inputFile = document.getElementById("avatar");

      inputFile.addEventListener('change', handle, false);

      function handle(event) {
        //上传图片
        let e = event || window.event;
        let files = e.target.files;
        if (files.length > 0) {
          let file = e.target.files[0];
          let fileName = e.target.files[0].name;  // 文件名称
          let fileSize = e.target.files[0].size;  // 文件大小
          if (fileSize > 4 * 1024 * 1024) {
            alert('上传图片大小不要超过4M');
            return false;
          }
          if (!/\.(jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
            alert('图片类型必须是jpeg,jpg,png中的一种');
            return false;
          }
          let reader = new FileReader(); // 创建一个 filereader对象
          reader.onload = e => {
            let data;
            if (typeof e.target.result === "object") {
              // 把Array Buffer转化为blob 如果是base64不需要
              data = window.URL.createObjectURL(new Blob([e.target.result]));
            } else {
              data = e.target.result;
            }
            // 获取得到的文件信息
            console.log(data)
          };
          // 转化为base64
          reader.readAsDataURL(file);
          // 转化为blob
          // reader.readAsArrayBuffer(file);
        }
      }
    })()

6.一些相关的MIME 文件类型

更丰富的MIME类型 点这里（是链接） 。

常用的扩展类型如下：

扩展类型	MIME类型
.cvs	text/csv
.doc	application/msword
.docx	application/vnd.openxmlformats-officedocument.wordprocessingml.document
.xls	application/vnd.ms-excel
.xlsx	application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.ppt	application/vnd.ms-powerpoint
.pptx	application/vnd.openxmlformats-officedocument.presentationml.presentation
.pdf	application/pdf
.png	image/png
.jpeg .jpg	image/jpeg
.gif	image/gif
.rar	application/x-rar-compressed
.zip	application/zip
.xml	application/xml

备注：如果在accept 限制类型不好使的时候可以尝试下，在accept 中写文件后缀。如application/x-rar-compressed 写成 .rar

最后：如果有不对的地方欢迎指正！ 更新时间：2019年3月25日