JavaScript File API总结

1.基本思路
HTML5在DOM中为文件输入元素添加了一个files集合，在通过文件输入字段选择了一个或多个文件时，files集合将包含一组File对象，每个File对象对应着一个文件，其中每个文件有name, size, type, lastModifiedDate属性。通过监听change事件并读取files集合就可以知道选择的每个文件的信息。示例代码如下：

var filesList = document.getElementById("files-list");EventUtil.addHandler(filesList, "change", function(event){    var files = EventUtil.getTarget(event).files,    i = 0,    len = files.length;    while(i < len){        console.log(files[i].name + file[i].type);        i++;    }});

2.FileReader类型
其实现方式是一种异步文件读取机制，可以把FileReader想象成XMLHttpRequest,区别是它读取的是文件系统，而不是远程服务器。FileReader提供一下几个方法。
(1)readAsText(file, encoding):以纯文本的方式读取文件，将读取到的文本保存在result属性中，encoding用于指定编码的类型，可选。
(2)readAsDataURL(file):读取文件并将文件以数据URI的形式保存在result属性中
(3)readAsBinaryString(file):读取文件并将一个字符串保存在result属性中，字符串中的每个字符表示一个字节。
(4)readAsArrayBuffer(file):读取文件并将一个包含文件的内容的ArrayBuffer保存在result属性中。
由于读取文件的过程是异步的，所以FileReader会涉及三个主要的事件。
progress(是否读取新数据):触发该事件以后，通过事件对象可以获得lengthComputable、loaded和total属性。
error(是否发生错误): 初始error事件时，相关信息将被保存到FileReader的error属性中，error属性是一个对象，其只有一个属性code(错误码)，1表示未找到文件，2表示安全性错误，3表示读取中断，4表示文件不可读，5表示编码错误。
load(是否已经读完整个文件): 文件成功加载后会触发load事件。
实例代码如下所示：

var filesList = document.getElementById("files-list");EventUtil.addHandler(filesList, "change", function(event){    var info = "",        output = document.getElementById("output"),        progress = document.getElementById("progress"),        files = EventUtil.getTarget(event).files,        type = "default",        reader = new FileReader();    if(/image/.test(files[0].type)){        reader.readAsDataURL(file[0]);        type = "image";    } else {        reader.readAsText(files[0]);        type = "text";    }    reader.onerror = function(){        output.innerHTML = "Could not read file, error code is" + reader.error.code;    };    reader.onprogress = function(){        if(event.lengthComputable){            progress.innerHTML = event.loaded + "/" + event.total;        }    };    reader.onload = function(){        var html = "";        switch(type){            case "image":                html = "<img src=\" + reader.result + "\">";                break;            case "text":                html = reader.result;                break;        }        output.innerHTML = html;    }});

3.读取文件的部分内容
可以通过File对象的slice()方法实现读取文件的部分内容，方法返回的是Blob实例，Blob是File类型的父类型，在不同的浏览器中方法名不同，如下是一个通用的函数。

function blobSlice(blob, startByte, length){    if(blob.slice){        return blob.slice(startByte, length);    } else if(blob.webkitSlice){        return blob.webkitSlice(startByte, length);    } else if(blob.mozSlice){        return blob.mozSlice(startByte, length);    } else {        return null;    }}

下面是使用该方法的代码：

var filesList = document.getElementById("files-list");EventUtil.addHandler(filesList, "change", function(event){    var info = "",        output = document.getElementById("output"),        progress = document.getElementById("progress"),        files = EventUtil.getTarget(event).files,        reader = new FileReader();        blob = blobSlice(files[0], 0, 32);    if(blob){        reader.readAsText(blob);        reader.onerror = function(){            output.innerHTML = "Could not read file, error code is" + reader.error.code;        };        reader.onload = function(){            output.innerHTML = reader.result;        }    } else {        alert("Your browser dosen't support slice()");    }});

4.对象URL
后期再加….