HTML5 File接口在web页面上使用文件下载
file接口提供了与文件相关的信息，并且运行javascript在web页面上去访问文件中的内容。
file对象来自于用户使用input标签选择文件返回的filelist对象，来自于拖放操作的datatransfer对象。file对象是一种特殊的blob，它能够在任何能够使用blob的上下文中使用。
要在web页面中使用文件，通常需要涉及到的对象有：file对象，filelist对象，filereader对象。
filelist对象
filelist来自于两个地方，分别是input元素的files属性以及drag and drop api(当拖动文件时，event.datatransfer.files就是一个filelist对象)
<input id="fileitem" type="file">
var filelist = document.getelementbyid('fileitem').files
filelist对象的标准属性
length：这个一个只读属性，这个属性返回filelist对象中包含的file对象的长度。
filelist对象的标准方法
item(index):取得filelist对象中指定位置的file对象。它可以用数组索引的形式去简写
file对象
filelist对象的每一项都是file对象。file对象是一种特殊的blob。
file对象的标准属性
1.lastmodified：返回文件被修改的时间，这个时间是距离1970年1月1日0点0时0分经过的毫秒数。是一个只读属性
2.name：返回文件对象引用的文件的文件名，这是一个只读属性
3.type：返回文件对象引用的文件的文件类型，是mine type，这个是一个只读属性。
4.size：返回文件对象引用的文件的文件大小，这个一个只读属性。
file对象的标准方法
没有给file对象单独定义方法，但是它有从blob对象那儿继承来的方法。
filereader对象
filereader对象使web应用能够异步读取用户计算机上的文件。
filereader()是一个构造函数，通过它可以创建一个新的filereader对象。
var filereader = new filereader();
filereader对象的标准属性
1.error：返回文件读取过程中发生的错误。
2.result：返回文件的内容，返回值得类型是string或者arraybuffer。这个属性只有在读取操作完成之后才是合法的。
3.readystate：返回读取操作当前的状态，可能的取值是0：还没有开始读取，1：正在读取，2：读取完成。
filereader对象的标准方法
1.abort():中断读取操作。readystate的值变成2.
2.readasarraybuffer(blob):读取指定的blob，如一个file对象（file对象是一种特殊的blob）。只要读取完成，readystate属性的值就会变为2，result属性是一个表示文件数据的arraybuffer。
3.readasdataurl(blob):读取指定的blob，如一个file对象（file对象是一种特殊的blob）。只要读取完成，readystate属性的值就会变为2，result属性是一个表示文件数据的url，并且数据格式是base64编码的字符串
<input type="file" onchange="previewfile()"><br> <img src="" height="200" alt="image preview...">
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);
}
}
4.readastext(boob,encoding):读取指定的blob，如一个file对象（file对象是一种特殊的blob）。只要读取完成，readystate属性的值就会变为2，result属性是一个表示文件数据的文本字符串。第二个参数是可选的，它用于指定result属性中文本字符串的编码方式，默认为utf-8。
filereader对象的事件
1.abort：终止读取操作时触发。
2.error：读取操作过程中遇到错误时触发。
3.load：读取操作成功的完成时触发。
4.loadend：读取操作结束时触发。不能是读取成功还是读取失败。
5.loadstart：读取操作开始时触发。
6.process：读取过程中触发。
在web应用中使用文件
使用html5中的文件对象，可以访问选择的本地文件，并且读取这些文件中的内容。文件对象要么来自于input元素，要么来自于drag and drop接口。
通过input元素选择文件
<input type="file" id="input">
访问通过input选择的文件
var selectedfile = document.getelementbyid('input').files[0];
上述代码段一次只能选择一个文件，如果一次要选择多个文件，就需要给input元素添加一个multiple属性，并将multiple属性设置我true。在gecko 1.9.2之前不支持一次选择多个文件。
通过drag and drop接口选择文件
关于drag and drop接口可以查看html5 dragevent。
第一步：创建一个放置区域。一个普通的元素，如div，p等。
第二步：给放置区添加drop，dragenter，dragover事件处理程序。其中起关键作用的是drop事件处理程序。
下面是一个显示缩略图的例子：
<div id='dropbox' class='dropbox'></div>
.dropbox{
border:solid 3px red;
height:400px;
width:auto;
}
var dropbox;
dropbox = document.getelementbyid("dropbox");
//注册事件处理程序
dropbox.addeventlistener("dragenter", dragenter, false);
dropbox.addeventlistener("dragover", dragover, false);
dropbox.addeventlistener("drop", drop, false);
function dragenter(e) {
e.stoppropagation();
e.preventdefault();
}
function dragover(e) {
e.stoppropagation();
e.preventdefault();
}
function drop(e) {
e.stoppropagation();
e.preventdefault();
var dt = e.datatransfer;
var files = dt.files;
handlefiles(files);
}
function handlefiles(files) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
var imagetype = /^image\//;
if (!imagetype.test(file.type)) {
continue;
}
var img = document.createelement("img");
img.file = file;
dropbox.appendchild(img);
var reader = new filereader();
reader.onload = function() {
img.src = reader.result;
};
reader.readasdataurl(file);
}
}
以上所述是小编给大家介绍的html5 file接口在web页面上使用文件下载，希望对大家有所帮助