HTML5中File对象初探

在 HTML 5 中，JavaScript 得以获得更多的权限来处理文件，而不再像这之前，只能获得一个 file input 的 DOM。根据W3C的草案，JavaScript 被允许获得文件的"文件名"，"大小"，"文件类型"等等信息，并允许通过一些不同形式的方法，获得文件的内容，并将其通过 Ajax 传送。事实上，已经有部分浏览器开始支持这一特性。但这并不意味着在这些浏览器中可以任意地访问用户的信息，JavaScript 只能通过被动的方式获得文件，确切地说，就目前而言，可以通过 file input 和 用户的拖放操作获取到文件，这些信息，都被放在了 File 对象里面。

接下来，我们将逐一了解 FileReader 的方法与事件模型，并最终通过一个例子程序来应用 FireRead，在这个例子中，使用支持 FileReader 浏览器的用户将能够通过一个 file input 选择一个图像文件，并不经过后台将图像显示在页面中。下面的链接指向这个例子，值得注意的是，到目前为止，只有 Firefox 3.6+ 和 Chrome 6.0+ 实现了 FileReader 接口。

通过 Input 获得 File 对象的方法：

<input type="file" id="input">
<!-- 如果你愿意，可以在这个标签里写上 "Multiple" 表示支持多文件形式 -->

接下来为这个 input 元素添加 change 事件监听。

	var inputElement = document.getElementById("input");  
	inputElement.addEventListener("change", handleFiles, false);
	
	function handleFiles(){
		var fileList = this.files;
		for( var i = 0 ; i < fileList.length ; i++ ){
			console.log(fileList[i]);
		}
	}

执行上面的代码，将会在控制台输出 File 对象，多文件形式则输出多个 File 对象。

正如代码所呈现的那样，通过监听 input 元素，change 事件被触发时，在监听函数的 this 中，多出来一个"files"的属性，关于 HTML 5 File 的玄妙就都在这里面了。

通过拖拽操作获得 File 对象的方法：

<div id="dropbox"> Drop Here </div>

var 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;
    //至此，已经达到了和上一种方式相同的目的
} 

显而易见的，通过事件对象的 dataTransfer 可以得到文件，但同样需要对它进行遍历，因为现在它还是一个 fileList 。 这就是 JavaScript 的被动获取，只能通过监听事件，当用户有相应操作时，才能得到文件。这样才能确保用户的安全。

现在我们已经得到了 File 对象，接下来要考虑如何获得文件的内容。在 W3C 草案中，File 对象只包含文件名，文件类型等只读属性。但 Firefox 已经为其添加了几个实用的方法，比如：

//读取文件的二进制源码
var fileBinary = file.getAsBinary();

但这并非 W3C 的标准的做法，根据其草案，有一个名为 FileReader 的类（实为对象）专门用以读取文件内容，并且可以监控读取状态。

reader = new FileReader();

FileReader 提供的方法包括： "readAsBinaryString" ，"readAsDataURL" ，"readAsText" ，"abort" 等。下面的代码就是一个使用 FileReader 将用户选择的图片不通过后台即时显示出来的例子。

function handleFiles(files){
    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        var imageType = /image.*/;
        
        if (!file.type.match(imageType)) {
            continue;
        }
        
        var img = document.createElement("img");
        img.classList.add("obj");
        img.file = file;
        preview.appendChild(img);
        
        var reader = new FileReader();
        reader.onload = (function(aImg){
            return function(e){
                aImg.src = e.target.result;
            };
        })(img);
        reader.readAsDataURL(file);
    }
}

现在我们已经可以获得文件对象，读取文件的内容，最后要考虑的问题是如何同后端进行交互，即如何将读取到的文件内容向后端发送。原理上是，通过 FileReader 的 readAsBinaryString 方法读取到文件的二进制码，然后通过 XMLHttpRequest 的 sendAsBinary 方法将其发送出去。

var xhr = new XMLHttpRequest();
xhr.open("POST", "url");
xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
// text/plain 为你的文件类型，这可以通过 file 对象的 type 属性获取

xhr.sendAsBinary(binaryString);

这样发出去的是二进制流，没有表单域，没有name，以php为例，下面的示例代码演示了后端如何接收数据，当然在实际开发中，还需要做更多。

//方法一
$content = $GLOBALS['HTTP_RAW_POST_DATA'];
file_put_contents('name.type',$content);
	
//方法二
$content = file_get_contents("php://input");
file_put_contents('name.type', $content);

资料：

• W3C File API
• MDC File

HTML 5 仍处于草案阶段。各浏览器支持程度不一，支持方式不一，资料匮乏，受众面狭窄，项目开发仍需量力而行。 同时欢迎大家提出自己的看法和见解，对文中的错误进行指正。

PS. 本文示例代码仅完全适用于 Firefox 3.6+ ，部分适用于其他支持 HTML 5 接口的浏览器，完全不适用于 IE8 及以下版本 。