HTML 5 File API應用實例
關于HTML 5，51CTO已陸續報道了幾篇關于HTML 5應用技巧方面的文章，比如《探秘HTML 5鏈接預取功能》、《HTML 5 Web Sockets應用初探》等等，下面我們將介紹一個簡單的應用，該應用主要使用了HTML 5中的FileReader方法，FileReader就是HTML 5所提供的File API。
51CTO推薦專題： HTML 5 下一代Web開發標準詳解
在HTML 5里，從Web網頁上訪問本地文件系統變的十分的簡單，那就是使用File API。這個File規范說明里提供了一個API來表現Web應用里的文件對象，你可以通過編程來選擇它們，訪問它們的信息。這個File API包括：
◆一個FileList序列，代表著由本地系統里選中的單個的文件組成的數組。用來選擇文件的用戶接口可以通過<input type=”file”>調用實現。
◆一個Blob接口，它代表原始二進制數據，通過Blob對象你可以訪問里面的字節數據。
◆一個File接口，它里面存有文件的只讀屬性信息，像文件名，文件類型，文件數據訪問的地址。
◆一個FileReader接口，它提供了讀取一個文件的方法，和一個獲取文件讀取結果的事件模型。
◆一個FileError接口和一個FileException對象，它們用來定義這個規范中的錯誤產生條件。
如何使用這個例子：在這個例子中，給出了一個畫板，你可以從本地文件系統里拖拽進去一個圖片，或者你也可以用文件選擇框來選擇圖片。例子中，請只選擇圖片文件，請注意，該例子中并沒有添加文件過濾和文件類型檢查。請記住，沒有一個瀏覽器完全實現了HTML 5，這個例子需要在支持HTML 5的瀏覽器上運行，比如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 class="images" src="', e.target.result,'" title="', aFile.name, '"/>'].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>
這個例子只是演示了拖拽本地文件到畫板里，主要是想展示出HTML 5 File API簡單但又強大的能力。
代碼下載：https://www.ibm.com/developerworks/mydeveloperworks/files/app?lang=en#/person/270000CN12/file/c12b834e-5ec2-457d-80fa-97df433938d7
原文作者：Bob Leah
原文鏈接：https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/entry/
html5_code_example_of_file_api_drag_drop_hard_drive_files_to_a_webpage28?lang=en
【編輯推薦】
