首頁 > 文章 > web前端 > HTML5 實作存取本機檔案的方法

HTML5 實作存取本機檔案的方法

不言原創: 2018-06-12 11:59:586334瀏覽

這篇文章主要介紹了關於HTML5 實現存取本地文件的方法，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

今天，我將向大家分享一個簡單的應用，用來示範使用FileReader的方法, FileReader是HTML5裡提供的一個檔案操作API,需要的朋友可以了解下在前面的幾篇文章裡，我向大家共享了幾個HTML5的例子，分別是拖曳功能演示，頁面內容可編輯化演示和本地存儲功能演示。今天，我將向大家分享一個簡單的應用，用來示範使用FileReader的方法, FileReader是HTML5裡提供的一個檔案操作API。
當你在看我前面所寫的HTML 5範例時，我正在思考建立一個簡單但又適用的範例、以一種更新奇的方式來演練這些HTML5新功能。我的目標並不是想單純的展示這些HTML 5 API，而是想用例子來告訴開發人員如何真正的以一種實用的和創新的方式實現這些API。
在HTML5裡，從Web網頁上存取本地檔案系統變的十分的簡單，那就是使用File API。這個File規範說明裡提供了一個API來表現Web應用裡的文件對象，你可以透過程式設計來選擇它們，存取它們的資訊。這個File API包括：
一個FileList序列，代表由本機系統裡選取的單一的檔案所組成的陣列。用來選擇檔案的使用者介面可以透過9146e572b55ac8e3a795b1d3ea0383cf呼叫實作。
一個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 = [&#39;<img class="images" src="&#39;, e.target.result,&#39;" title="&#39;, aFile.name, &#39;"/>&#39;].join(”); 
document.getElementById(‘thumbs’).insertBefore(span, null); 
}; 
})(f); 
imageReader.readAsDataURL(f); 
} 
} 
function dropIt(e) { 
imagesSelected(e.dataTransfer.files); 
e.stopPropagation(); 
e.preventDefault(); 
}

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

<td align=”left” height=”105″ ondragenter=”return false” ondragover=”return false” ondrop=”dropIt(event)”> 
<output id=”thumbs”></output> 
</td>

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

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

HTML5 實作存取本機檔案的方法

相關文章