File API 读取文件小结

简单地说，File API只规定怎样从硬盘上提取文件，然后交给在网页中运行的JavaScript代码。 与以往文件上传不一样，File API不是为了向服务器提交文件设计的。

关于File API不能做什么也非常值得注意。它不能修改文件，也不能创建新文件。 想保存任何数据，你可以通过Ajax把数据发送到服务器，或者把它保存在本地存储空间中。

取得文件

• 使用input元素。将其type属性设置为file，这样是最常见的标准上传文本框
• 隐藏的input元素。为了保证风格一致，可以把input元素隐藏起来，显示一个漂亮的按钮。 用户点击按钮时，通过JS调用隐藏的input的click事件
• 拖放。把文件拖放到网页上

读取文本文件readAsText()

使用File API可以直接读取文件文件的内容。创建一个例子

<input name="myAvatar" type="file" onchange="processFiles(this.files)" />

选择一个文件后，会触发这个input元素的onChange事件，因而就会执行processFiles()函数

var output = document.getElementById(‘fileOutput‘);
var processFiles = function(files) {
    // 一次只允许上传一个文件
    var file = files[0];
    var reader = new FileReader();

    reader.onload = function(e) {   
        output.textContent = e.target.result;
    }
    reader.readAsText(file);
};

每个文件对象都有三个有用的属性：name，保存文件名。size保存文件的字节大小。 type 保存文件的MIME类型

一次读取多个文件multiple

为input元素添加multiple属性，一次可以读取多个文件

<input name="myAvatar" type="file" multiple onchange="processFiles(this.files)" />

循环处理多文件。注意onLoad事件是异步的

var processFiles = function(files) {
    var fileContents = [];

    for(var i=0, len = files.length; i< len; i++) {
        // 每个文件建立一个文件句柄
        var reader = new FileReader();
        // 由于onload是异步处理函数，使用闭包记录i值。否则i一直等于len
        (function(i) {
            reader.onload = function(e) {
                fileContents.push(e.target.result);
                if(i === len - 1) {
                    output.textContent = fileContents.join(‘\n\n\n‘);
                }
            }
        })(i)
        reader.readAsText(files[i]);
    }
};

读取图片文件readAsDataURL()

FileReader处理文本内容只需要一步。同样，处理图片内容也这么简单。 这归功于readAsDataURL()方法。

下面的例子涉及处理图片和文件拖放。提交的图片文件用于绘制元素的背景。

var dropBox;
document.addEventListener(‘DOMContentLoaded‘, function() {
    dropBox = document.getElementById(‘dropbox‘);
    dropbox.addEventListener(‘dragenter‘, ignoreDrag, false);
    dropbox.addEventListener(‘dragover‘, ignoreDrag, false);
    dropbox.addEventListener(‘drop‘, drop, false);
}, false)
var processFiles = function(files) {
    var file = files[0];
    var reader = new FileReader();
    reader.onload = function(e) {
        dropBox.style.backgroundImage = ‘url(‘ + e.target.result + ‘)‘;
    };

    // 读取图片
    reader.readAsDataURL(file);
};
var ignoreDrag = function(e) {  
    e.stopPropagation();
    e.preventDefault();
};
var drop = function(e) {
    ignoreDrag(e);

    var data = e.dataTransfer;
    var files = data.files;
    processFiles(files);
};

下面是html和css

<div id="dropbox">
    <div>Drop your image here</div>
</div>
#dropbox { 
    margin: 15px; width: 300px; height: 300px; 
    border: 5px dashed gray; border-radius: 8px;
    background: lightyellow; background-size: 100%; 
    background-repeat: no-repeat; text-align: center;
}
#dropbox div { margin: 100px 70px; color: orange; font-size: 25px; }

更新2014/07/10

对异步循环使用递归

var processFiles = function(files) {
    var filesLen = files.length
        , reader = null
        , fileContents = []
        , readFile = function(i) {
            if(i === filesLen) {                // 递归的结束条件
                output.textContent = fileContents.join(‘\n\n\n‘);
                return;
            }
            reader = new FileReader();
            reader.onload = function(e) {
                fileContents.push(e.target.result);
                readFile(i+1);                  // 保证输出顺序
            };
            reader.readAsText(files[i]);
        };

    if(!filesLen) return;
    readFile(0);                                // 开始递归
};

参考：the missing manual

File API 读取文件小结,布布扣,bubuko.com