如何使用File APIs来读取文件-白红宇

兼容性检查

if (window.File && window.FileReader && window.FileList && window.Blob) {	//支持File APIs} else {	//不支持File APIs}复制代码

FileReader()

FileReader对象让web应用程序可以异步地读取存储在用户电脑上的文件(或者原始数据缓冲区)的内容。在JavaScript中，FileReaderd对象通过传入两种相应的对象(File和Blob)来进行数据的读取，而且这个方法在Web Workers中也能使用。

FileReader 包括四个异步读取文件的选项：

FileReader.readAsBinaryString(Blob|File) - 返回值的result 属性将包含二进制字符串形式的file/blob 数据。每个字节均由一个 [0..255] 范围内的整数表示。

FileReader.readAsText(Blob|File, opt_encoding) - 返回值的result 属性将包含文本字符串形式的 file/blob 数据。该字符串在默认情况下采用“UTF-8”编码。使用可选编码参数可指定其他格式。

FileReader.readAsDataURL(Blob|File) - 返回值的result 属性将包含编码为数据网址的 file/blob 数据。

FileReader.readAsArrayBuffer(Blob|File) - 返回值的result 属性将包含 ArrayBuffer 对象形式的 file/blob 数据。

FileReader 对象调用其中某一种读取方法后，可使用 onloadstart、onprogress、onload、onabort、onerror 和 onloadend 跟踪其进度。

读取文件并显示进度

下面的示例从用户选择的内容中过滤掉了图片，对文件调用 reader.readAsDataURL()，并通过将“src”属性设为数据网址来呈现缩略图。

        
    
        复制代码

See the Pen by Lu () on .

FileList API

字面上可以理解为多个File对象组合成的数组，但是只有length属性和item(index)方法，访问其中的File对象既可以使用files.item(index)，也可以使用files[index]的方法。

File API

File对象是一种特定类型的Blob。FileReader, URL.createObjectURL(), createImageBitmap(), 以及XMLHttpRequest.send() 都接受Blobs和Files。

File对象包含的信息

{	lastModified: 1428005315000,	lastModifiedDate: Thu Apr 02 2015 15:08:35 GMT-0500 (CDT),	name: "profile.pdf",	size: 135568,	type: "application/pdf",	webkitRelativePath: ""}复制代码

需要注意的是，type是根据文件扩展名来判断的，所以并不是很可靠。根据上面File对象的信息其实就可以实现一些常用的功能了，比如限制文件上传的大小，初步的限制文件上传的类型(当然也可以通过input元素的accept属性来实现，但是最终的类型验证还是需要在服务器端实现)。

File对象一般通过以下途径返回的FileList对象获取：

<input type="file">的元素

拖拽操作的DataTransfer对象

通过在一个HTMLCanvasElement上调用mozGetAsFile() API

通过input来选择文件

/* 假设input元素为 *///multiple表示一次支持多个文件上传let uploadInput = document.getElementById('upload');uploadInput.addEventListener('change', ()=>{	let fileList = uploadInput.files;	console.log(fileList);});复制代码

由于FileList对象并没有forEach()方法，所以一般需要通过for循环来遍历其中的每个File对象：

for (var i = 0; fileCount = fileList.length; i < fileCount; i++) {	console.log(fileList[i]);}复制代码

但是我们也可以通过其他方式来使用forEach()方法：

//1.call方法[].forEach.call(fileList, (file, i, fileList)=>{	...});//2.ES6方法Array.from(uploadInput).forEach((i)=>{	...});复制代码

通过拖拽(drag&drop)选择文件

拖拽事件：

drag(开始拖动，持续事件)

dragend(释放鼠标或者按下ESC，结束拖动)

dragenter(进入有效的拖拽区域时)

dragexit(当一个元素不再是拖动操作的直接选择目标时)

dragleave(离开有效的拖拽区域时)

dragover(悬停在有效的拖拽区域内时，持续事件)

dragstart(开始拖动)

drop(目标放置到有效的拖拽区域时)

其中需要注意两点：

如果dragover事件不阻止默认事件，drop事件就不会被触发。

dragexit和dragleave在不同浏览器中的触发存在差异，dragexit在Chrome浏览器中就永远不会被触发。

//拖拽和显示区域
    
     Drop files here
    
复制代码