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
后期再加….