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 及以下版本 。