前言HTML5中提供的文件API在前端有着丰富的应用。上传、下载和阅读内容在日常交互中很常见。而且在各种浏览器中的兼容性都比较好，包括移动端，只是IE只支持IE10以上的版本。要想更好地掌握操作文件的功能，首先要熟悉各个API。FileList对象和文件对象HTML中的input[type="file"]标签有一个multiple属性，允许用户选择多个文件，FileList对象表示用户选择的文件列表。此列表中的每个文件都是一个文件对象。文件对象的属性：name：文件名，不包括路径。类型：文件类型。图片类型的文件会以image/开头，可以用来限制只能上传图片。大小：文件大小。可以根据文件大小执行其他操作。lastModified：上次修改文件的时间。input中有一个accept属性，可以用来指定文件上传可以提交的文件类型。accept="image/*"可以用来限制只上传图片格式。但是在Webkit浏览器下，存在响应慢的问题，需要好几秒才能弹出文件选择框。解决方法是将*通配符更改为指定的MIME类型。Blob对象Blob对象相当于一个容器，可以用来存储二进制数据。它有两个属性，size属性表示字节长度，type属性表示MIME类型。如何创建Blob对象可以使用Blob()构造函数来创建。varblob=newBlob(['hello'],{type:"text/plain"});Blob构造函数中的第一个参数是一个数组，可以存储ArrayBuffer对象、ArrayBufferView对象、Blob对象和字符串。Blob对象可以通过slice()方法返回一个新的Blob对象。varnewblob=blob.slice(0,5,{type:"text/plain"});slice()方法接受三个参数，都是可选的。第一个参数表示从Blob对象中复制二进制数据的起始位置，第二个参数表示复制的结束位置，第三个参数是Blob对象的MIME类型。canvas.toBlob()也可以创建一个Blob对象。toBlob()使用三个参数，第一个是回调函数，第二个是图片类型，默认是image/png，第三个是图片质量，取值在0到1之间。varcanvas=document.getElementById('canvas');canvas.toBlob(function(blob){console.log(blob);},"image/jpeg",0.5);下载文件的Blod对象可以通过window.URL对象生成一个网络地址，结合一个标签的download属性实现下载文件的功能。例如，将画布下载为图像文件。varcanvas=document.getElementById('canvas');canvas.toBlob(function(blob){//使用createObjectURL生成地址，格式为blob:null/fd95b806-db11-4f98-b2ce-5eb16b38ba36varurl=URL.createObjectURL(blob);vara=document.createElement('a');a.download='canvas';a.href=url;//模拟标签点击下载a.click();//告诉下载后浏览器不再需要保留对该文件的引用URL.revokeObjectURL(url);});您也可以用类似的方式将字符串保存为文本文件。FileReader对象FileReader对象主要用于将文件读入内存，并读取文件中的数据。通过构造函数创建一个FileReader对象varreader=newFileReader();该对象有以下方法：abort：中断读操作。readAsArrayBuffer：将文件内容读入ArrayBuffer对象。readAsBinaryString：将文件读取为二进制数据。readAsDataURL：将文件读取为data:URL格式的字符串。readAsText：将文件作为文本读取。上传图片预览常见的应用是在客户端上传图片后通过readAsDataURL()显示图片。不过有些手机会有bug，你会发现照片是倒过来的，包括三星和iPhone。..解决方案这里就不多说了，有兴趣的可以看看：移动端图片上传、旋转、压缩解决方案数据备份与恢复FileReader对象的readAsText()可以读取文件的文本，结合Blob对象下载文件的功能，那么就可以实现数据导出文件备份到本地，当需要恢复数据时，通过input上传备份文件，使用readAsText()读取文本，并恢复数据。代码的作用与上面类似，这里不再赘述。具体应用可以参考：notepadBase64编码在HTML5中增加atob和btoa方法来支持Base64编码。它们的命名也很简单，btoa和atob代表编码和解码。vara="https://lin-xin.github.io";varb=btoa(a);varc=atob(b);console.log(a);//https://lin-xin.github.ioconsole.log(b);//aHR0cHM6Ly9saW4teGluLmdpdGh1Yi5pbw==console.log(c);//https://lin-xin.github.iobtoa方法对字符串a进行编码，不改变a的值，返回一个编码后的值。atob方法对编码的字符串进行解码。但是如果参数中包含中文，则已经超出了8位ASCII编码的字符范围，浏览器会报错。所以中文需要先用encodeURIComponent编码。vara="HelloWorld";varb=btoa(encodeURIComponent(a));varc=decodeURIComponent(atob(b));console.log(b);//JUU1JTkzJTg4JUU1JTk2JUJEJTIwJUU0JUI4JTk2JUU3JTk1JThDconsole.log(c);//ha世界更多文章：lin-xin/blog
