HTML5 實現一個訪問本地文件的實例

點評：今天，我將向大家分享一個簡單的應用，用來演示使用FileReader的方法, FileReader是HTML5裡提供的一個文件操作API,需要的朋友可以了解下

當你在看我前面所寫的HTML 5例子時，我正在思考創建一個簡單但又適用的例子、以一種更新奇的方式來演練這些HTML5新特性。我的目標並不是想單純的展示這些HTML 5 API，而是想用例子來告訴開發人員如何真正的以一種實用的和創新的方式實現這些API。

在HTML5裡，從Web網頁上訪問本地文件系統變的十分的簡單，那就是使用File API。這個File規範說明里提供了一個API來表現Web應用裡的文件對象，你可以通過編程來選擇它們，訪問它們的信息。這個File API包括：

一個FileList序列，代表著由本地系統裡選中的單個的文件組成的數組。用來選擇文件的用戶接口可以通過<input type=file>調用實現。

一個Blob接口，它代表原始二進制數據，通過Blob對像你可以訪問裡面的字節數據。

一個File接口，它裡面存有文件的只讀屬性信息，像文件名，文件類型，文件數據訪問的地址。

一個FileReader接口，它提供了讀取一個文件的方法，和一個獲取文件讀取結果的事件模型。

一個FileError接口和一個FileException對象，它們用來定義這個規範中的錯誤產生條件。

如何使用這個例子：在這個例子中，我給出了一個畫板，你可以從本地文件系統裡拖拽進去一個圖片，或者你也可以用文件選擇框來選擇圖片。例子中，請只選擇圖片文件，我並沒有添加文件過濾和文件類型檢查。請記住，沒有一個瀏覽器完全實現了HTML5，這個例子需要在支持HTML5的瀏覽器上運行，比如Firefox3.5以上。

實現File API的主要方法非常的簡單，就像下面：

function imagesSelected(myFiles) {

for (var i = 0, f; f = myFiles[i]; i++) {

var imageReader = new FileReader();

imageReader.onload = (function(aFile) {

return function(e) {

var span = document.createElement('span');

span.innerHTML = ['<img src="', e.target.result,'"/>'].join();

document.getElementById('thumbs ').insertBefore(span, null);

};

})(f);

imageReader.readAsDataURL(f);

}

}

function dropIt(e) {

imagesSelected(e.dataTransfer.files);

e.stopPropagation();

e.preventDefault();

}

我選擇在<td>上放置我的ondrop事件：

<td align=left height=105″ ondragenter=return false ondragover=return false ondrop=dropIt(event)>

<output id=thumbs></output>

</td>

這個例子中，我只是拖拽本地文件到畫板裡。然而我想它能向你表明File API的簡單但強大的能力