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