看这儿！告诉你，HTML5里面有个超级棒的东西，叫做File！它除了能让我们传文件之外，还能直接下载文件！所以，今天就来说说这个File接口，File啦、FileList啦、FileReader之类的。希望大家看完这篇文章以后，下载网页上的文件就能轻松多~
File对象与FileList对象
HTML5里那个所谓的File就是咱们在网页上随便传东西的地方！人家可是input标签或者拖动文件时的神器DataTransfer对象搞出来的。千万别小瞧了File，它本质跟Blob是一模一样的，不过稍微牛逼点儿而已。想怎么折腾就怎么折腾。至于FileList么？它就像是一个装着好几个File的大篮子咯。想要知道有多少个，有几个的话，找找length，然后再摸索着item(index)去选自己心仪的那个就行。
说到网页上选文件的窍门，我觉得有些工具真的很实用，简单又好用。比如那个叫File和FileList的哥俩，还有那个名叫FileReader的小伙子，虽然身形小巧，但干起活儿来可是麻利得很。不管你是要找文件还是改文件，这三位小助手都能帮你做到，甚至还能挑战高难度任务！
var fileList = document.getElementById('fileItem').files
File对象属性
1. name属性：返回文件的文件名，是一个只读属性。
这个东西就是告诉你，咋弄出这样一份文件滴。千万别乱动
大小属性就是个方便的小帮手，告诉你文件的尺寸，让你清楚明了。可惜，它只能看，却无法操作呦~
FileReader对象
这个FileReader好比是你家门上的那把钥匙，能让你轻松找到别人家里的宝贝。它就是专门处理文件的小助手，只要敲敲代码，创建个FileReader()，就能直接使用！即使出了岔子，还有error事件来提醒你。
FileReader对象有几个重要方法：
记住用readAsArrayBuffer方法来搞定Blob让人郁闷的问题这样看文档就方便了，直接转成ArrayBuffer就能搞定！
直接把blob里面的东西解码成data URL呗，这不就是在读取文件吗？
那么简单点来说，你拿到了Blob这个东西比如说文档，首先得弄清楚它的编码方式，绝大多数情况是UTF-8。然后，把它转换为文本就轻而易举！
function previewFile() {
var preview = document.querySelector('img');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.addEventListener("load", function () {
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
搞定了，直接让用户选喜欢的文件开始搞，搞完了就接着干后面的活儿，然后把他们想要的东西告诉他们
使用HTML5 File接口访问本地文件
搞得定！这些HTML5文件就是你平时在电脑或手机网页里看到的那种文件。上传到网络平台，想怎么下就怎么下！
要找文件？你找input就对了呗！不管你想怎么搞，都能通过它找到选中的文件。再提醒你一句，如果你想让用户选多个文件的话，就在input里添个multiple属性设为真正行了，随心所欲选！
简单说，HTML5 File API就是给在网页上混迹的朋友们提供的方便实用神器，传文件、下文件都能轻松搞定，仿佛全是小孩子过家家那么容易！学会这几个神奇的API，就能让大家轻松实现传说中的”快刀斩乱麻”式的文件处理效果。
。
评论0