扣丁学堂HTML5培训之文件上传下载源码分享

2018-07-09 14:24:14 599浏览

今天扣丁学堂小编给大家分享一个HTML5视频教程之文件上传下载的案例及源码，首先HTML5文件API在前端中有着丰富的应用，上传、下载、读取内容等在日常的交互中很常见。而且在各个浏览器的兼容也比较好，包括移动端，除了IE只支持IE10以上的版本。想要更好地掌握好操作文件的功能，先要熟悉每个API。

FileList对象和file对象

HTML中的input[type="file"]标签有个multiple属性，允许用户选择多个文件，FileList对象则就是表示用户选择的文件列表。这个列表中的每一个文件，就是一个file对象。

file对象的属性：

name:文件名，不包含路径。

type:文件类型。图片类型的文件都会以image/开头，可以由此来限制只允许上传图片。

size:文件大小。可以根据文件大小来进行其他操作。

lastModified:文件最后修改的时间。

　　<inputtype="file"id="files"multiple>
　　<script>
　　varelem=document.getElementById('files');
　　elem.onchange=function(event){
　　varfiles=event.target.files;
　　for(vari=0;i<files.length;i++){
　　//文件类型为image并且文件大小小于200kb
　　if(files[i].type.indexOf('image/')!==-1&&files[i].size<204800){
　　console.log(files[i].name);}
　　}
　　}
　　</script>

input中有个accept属性，可以用来规定能够通过文件上传进行提交的文件类型。

accept="image/*"可以用来限制只允许上传图像格式。但是在Webkit浏览器下却出现了响应滞慢的问题，要等上好几秒才弹出文件选择框。

解决方法就是将*通配符改为指定的MIME类型。

<inputtype="file"accept="image/gif,image/jpeg,image/jpg,image/png">

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()来显示图片。

　　<inputtype="file"id="files"accept="image/jpeg,image/jpg,image/png">
　　<imgsrc="blank.gif"id="preview">
　　<script>
　　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]);
　　}
　　}
　　</script>

但是在一些手机上竖着拍照上传照片时会有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);//欢迎来到扣丁学堂

以上就是关于扣丁学堂HTML5培训之文件上传下载源码分享的详细介绍，希望能帮到更多的小伙伴了解HTML5开发技术，想要了解更多内容的小伙伴可以登录扣丁学堂官网咨询。扣丁学堂是专业的HTML5培训机构，不仅有专业的老师和与时俱进的课程体系，还有大量的HTML5在线教程供学员观看学习哦。扣丁学堂H5技术交流群：559883758。

【关注微信公众号获取更多学习资料】

查看更多关于“HTML5开发技术资讯”的相关文章>>