HTML5中的文件读取---File API

1.简介

在Html5中提供了一种通过File API规范与本地文件进行交互的标准方法。在使用 File API 在向服务器发送图片的过程中可以创建图片的缩略图预览，也可以允许应用程序在用户离线时保存文件引用。另外，您可以使用客户端逻辑来验证上传内容的 type 与其文件扩展名是否匹配，或者限制上传内容的大小。
该规范通过“本地”文件系统提供了多种文件访问接口：

1.1 FileList 对象

filelist对象是针对表单的file控件，当用户利用file控件选取文件以后，这个控件的files属性就是filelist对象。

//使用多选控件

image.png

注：除了file控件以外，采用拖放的方式，也可以得到filelist对象。一般情况下，filelist对象只能被动的读取，不可以手动构造，只有在user主动触发（选取或拖拽）了文件读取的行为，javascript才会访问到filelist。

1.2 File对象

在filelist对象中就包括了file对象，file对象含有以下的属性：

name: 文件名，只读属性；
size: 文件大小，单位为字节，只读属性；
type: 文件的MIME类型，若是分辨不出类型，则为空字符串，只读属性；
lastModified：文件的上次修改时间，格式为时间戳；
lastModifiedDate：文件上次修改时间，格式为Date对象实例。

如下图所示：

image.png

1.3 Blob对象

Blob(Binary Large Object)对象代表了一段二进制数据，提供了一系列操作接口，其他二进制数据的API（比如File对象），都是建立在Blob对象基础上的，继承了它的属性和方法。
生成Blob对象有两种方法：一种是使用Blob构造函数，另一中是对现有的Blob对象使用slice方法切出一部分。

1.4 FileReader

FileReader对象用于读取文件，他的参数是file对象或blob对象。对于不同类型的文件，FileReader提供了不同的读取方法：

• readerAsText(blob|File,opt_encoding) ：
  返回文本字符串，默认情况下，文本编码格式是UTF-8，可以通过可选参数指定其他编码格式的文本。
• readerAsDataURL(Blob|File) :
  返回一个基于Base64编码的data-uri对象（可用于标签中的src属性，从而达到图片预览的效果）。
• readerAsArrayBuffer(Blob|File) :
  返回一个ArrayBuffer对象。

FileReader对象采用异步方式读取文件，可以为一系列的事件指定回调函数。

• onabort() 方法 ：读取中段或者调用reader.abort（）方法时触发。
• onerror() 方法 ：读取出错时触发。
• onload() 方法 ：读取成功后触发。
• onloadend() 方法 ：读取完成后触发，不管是否成功。触发顺序排在onload或onerror后面。
• onloadstart() 方法 ：读取将要开始时触发。
• onprogress() 方法 ：读取过程中周期性触发（一般可用于获取文件的读取进度）。

1.5 createObjectURL 方法

调用URL对象的createObjectURL方法，传入一个File对象或者Blob对象，能生成一个链接。这个URL可以放置于任何通常可以放置URL的地方，比如标签的src属性。需注意的是即使是同样的二进制数据，每调用一次URL.createObjectURL方法。就会得到一个不一样的URL。

var URL = window.URL || window.webkitURL || window.mozURL ;
var SRC = URL.createObjectURL(file);

1.6 onprogress 事件

想要上传图片的时候显示进度条，在HTML5中提供了onprogress事件。onprogress事件可以作用于

• 下载的 progress 事件属于 XMLHttpRequest 对象
• 上传的 progress 事件属于 XMLHttpRequest.upload 对象

当上传或者下载时，会频繁调用该方法。该方法接受一个事件参数event,其中event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable 不为真，则event.total等于0。
示例代码：

    
    

        

    
    上传
    

2.检查环境

在编写前请先检查您当前的浏览器是否支持File API:

if(window.File &&window.FileReader &&window.FileList &&window.Blob) {
    alert( "Success! The File APIs are fully supported in this browser")
}else{ 
     alert('The File APIs are not fully supported in this browser.'); 
 }

3.选取文件

3.1 通过表单输入进行选取文件

选取文件最常用的方法就死使用标准的元素，JS会返回选定的File对象的列表，下面的示例是使用“multiple”属性实现同时选定多个文件：

image.png

3.2 通过拖拽选取文件并显示缩略图

该方法是在本地将文件从桌面拖放到浏览器进行选取，并显示图片的缩略图，具体示例如下：

  

    
Drop files here
    

  
  

示例显示结果如下：

image.png

3.2 监听上传进度

在HTML5中，提供了一个FormData对象，能关于模拟一个原始的表单格式的数据，在之前的表单数据传输中，必须要用form标签将要传输的数据包裹起来了，按照规定的格式与后台传输，HTML5中的FormData对象就模拟这种格式，将form表单元素的value值与对应的name属性结合起来，组成一个querystring字符串。下面示例结合FormData实现通过onprogress事件监控读取状态，并以进度条的形式显示出来。
示例代码如下：

      

            
            上传文件
            

            

                

                

                    

                        上传进度0%
                    
                
  
            
        
        

参考文件：

https://www.jianshu.com/p/b3e986fb1237
http://www.w3.org/TR/file-upload