今天扣丁学堂小编给大家分享一个HTML5开发培训中经常用到的文件上传下载的案例及源码，首先HTML5文件API在前端中有着丰富的应用，上传、下载、读取内容等在日常的交互中很常见。而且在各个浏览器的兼容也比较好，包括移动端，除了IE只支持IE10以上的版本。想要更好地掌握好操作文件的功能，先要熟悉每个API。
FileList对象和file对象
HTML中的input[type="file"]标签有个multiple属性，允许用户选择多个文件，FileList对象则就是表示用户选择的文件列表。这个列表中的每一个文件，就是一个file对象。
file对象的属性：
name:文件名，不包含路径。
type:文件类型。图片类型的文件都会以image/开头，可以由此来限制只允许上传图片。
size:文件大小。可以根据文件大小来进行其他操作。
lastModified:文件最后修改的时间。
varelem=document.getElementById('files');
elem.onchange=function(event){
varfiles=event.target.files;
for(vari=0;i
//文件类型为image并且文件大小小于200kb
if(files[i].type.indexOf('image/')!==-1&&files[i].size<204800){
console.log(files[i].name);}
}
}
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对象生成一个网络地址，结合a标签的download属性来实现下载文件功能。
比如把canvas下载为一个图片文件。
varcanvas=document.getElementById('canvas');
canvas.toBlob(function(blob){
//使用createObjectURL生成地址，格式为blob:null/fd95b806-db11-4f98-b2ce-5eb16b38ba36
varurl=URL.createObjectURL(blob);
vara=document.createElement('a');
a.download='canvas';
a.href=url;//模拟a标签点击进行下载
a.click();//下载后告诉浏览器不再需要保持这个文件的引用了
URL.revokeObjectURL(url);
});
也可以将字符串保存为一个文本文件，方法类似。
FileReader对象
FileReader对象主要用来把文件读入内存，并且读取文件中的数据。通过构造函数创建一个FileReader对象
varreader=newFileReader();
该对象有以下方法：
abort：中断读取操作。
readAsArrayBuffer：读取文件内容到ArrayBuffer对象中。
readAsBinaryString：将文件读取为二进制数据。
readAsDataURL：将文件读取为data:URL格式的字符串。
readAsText：将文件读取为文本。
上传图片预览
在常见的应用就是在客户端上传图片之后通过readAsDataURL()来显示图片。
varelem=document.getElementById('files'),
img=document.getElementById('preview');
elem.onchange=function(){
varfiles=elem.files,
reader=newFileReader();
if(files&&files[0]){
reader.onload=function(ev){
img.src=ev.target.result;
}
reader.readAsDataURL(files[0]);
}
}
但是在一些手机上竖着拍照上传照片时会有bug，会发现照片倒了，包括三星和iPhone。。。解决方案这里不做讲解，以后的文章我们会做介绍！
数据备份与恢复
FileReader对象的readAsText()可以读取文件的文本，结合Blob对象下载文件的功能，那就可以实现将数据导出文件备份到本地，当数据要恢复时，通过input把备份文件上传，使用readAsText()读取文本，恢复数据。
代码跟上面功能类似，这里不重复。
Base64编码
在HTML5中新增了atob和btoa方法来支持Base64编码。它们的命名也很简单，btoa和atob，即代表着编码和解码。
vara="http://www.codingke.com";
varb=btoa(a);
varc=atob(b);
console.log(a);//http://www.codingke.com
console.log(b);//aHR0cHM6Ly9saW4teGluLmdpdGh1Yi5pbw==
console.log(c);//http://www.codingke.com
btoa方法对字符串a进行编码，不会改变a的值，返回一个编码后的值。
atob方法对编码后的字符串进行解码。
但是参数中带中文，已经超出了8位ASCII编码的字符范围，浏览器就会报错。所以需要先对中文进行encodeURIComponent编码处理。
vara="哈喽世界";
varb=btoa(encodeURIComponent(a));
varc=decodeURIComponent(atob(b));
console.log(b);//JUU1JTkzJTg4JUU1JTk2JUJEJTIwJUU0JUI4JTk2JUU3JTk1JThD
console.log(c);//哈喽世界