HTML5 實現一個訪問本地文件的實例_HTML5教程
推薦：html5 桌面提醒：Notifycations應用介紹HTML5中的桌面提醒（web notifications）可以在當前頁面窗口彈出一個消息框，這個消息框是跨Tab 窗口的，這在用戶打開多個 tab 瀏覽網頁時，提醒比較方便，容易讓用戶看到
在前面的幾篇文章里，我向大家共享了幾個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的主要方法非常的簡單，就像下面：
復制代碼 代碼如下:www.ghpqjb.com
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事件：
復制代碼 代碼如下:www.ghpqjb.com
<td align=”left” height=”105″ ondragenter=”return false” ondragover=”return false” ondrop=”dropIt(event)”>
<output id=”thumbs”></output>
</td>
這個例子中，我只是拖拽本地文件到畫板里。然而我想它能向你表明File API的簡單但強大的能力
分享：HTML5教程之html 5 本地數據庫（Web Sql Database）HTML5的Web SQL Databases（html5 本地數據庫）的確很誘惑人，當你發現可以用與mysql查詢一樣的查詢語句來操作本地數據庫時，你會發現這東西挺有趣的。今天，我們一起來了解HTML 5的Web SQL Database API:openDatabase、transaction、executeSql。
相關HTML5教程：
- 只要五步 就可以用HTML5/CSS3快速制作便簽貼特效(圖)
- 網易微博Web App用HTML5開發的過程介紹
- HTML5 對各個標簽的定義與規定：body的介紹
- 關于HTML5的安全問題開發人員需要牢記的
- 關于HTML5的22個初級技巧(圖文教程)
- 開發人員所需要知道的HTML5性能分析面面觀
- HTML5 Web Database 數據庫的SQL語句的使用方法
- HTML5實踐-圖片設置成灰度圖
- HTML5安全介紹之內容安全策略（CSP）簡介
- HTML5 Web存儲方式的localStorage和sessionStorage進行數據本地存儲案例應用
- Bootstrap 學習分享
- input元素的url類型和email類型簡介
- 相關鏈接：
- 教程說明：
HTML5教程-HTML5 實現一個訪問本地文件的實例
。