HTML5 實作一個存取本機檔案的實例_html5教學技巧

在前面的幾篇文章裡，我向大家共享了幾個HTML5的例子，分別是拖曳功能演示，頁面內容可編輯化演示 和 本地存儲功能演示。 今天，我將向大家分享一個簡單的應用，用來示範使用FileReader的方法, FileReader是HTML5裡提供的一個檔案操作API。

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

在HTML5裡，從Web網頁上存取本地檔案系統變的十分的簡單，那就是使用File API。這個File規範說明裡提供了一個API來表現Web應用裡的文件對象，你可以透過程式設計來選擇它們，存取它們的資訊。這個File API包括：
一個FileList序列，代表由本機系統裡選取的單一的檔案所組成的陣列。用來選擇檔案的使用者介面可以透過呼叫實作。
一個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 =span.innerHTML = [''].join(”);
document.getElementById( 'thumbs').insertBefore(span, null);
};
})(f);
imageReader.readAsDataURL(f);
}
}
function dropIt( e) {
imagesSelected(e.dataTransfer.files);
e.stopPropagation();
e.preventDefault();
}

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

複製代碼

代碼如下:

代碼如下:

代碼如下:代碼如下:代碼如下:

這個例子中，我只是拖曳本地文件到畫板裡。