如何使用HTML5實現(xiàn)訪問本地文件

今天就跟大家聊聊有關如何使用HTML5實現(xiàn)訪問本地文件，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

當你在看我前面所寫的HTML 5例子時，我正在思考創(chuàng)建一個簡單但又適用的例子、以一種更新奇的方式來演練這些HTML5新特性。我的目標并不是想單純的展示這些HTML 5 API，而是想用例子來告訴開發(fā)人員如何真正的以一種實用的和創(chuàng)新的方式實現(xiàn)這些API。
在HTML5里，從Web網(wǎng)頁上訪問本地文件系統(tǒng)變的十分的簡單，那就是使用File API。這個File規(guī)范說明里提供了一個API來表現(xiàn)Web應用里的文件對象，你可以通過編程來選擇它們，訪問它們的信息。這個File API包括：
一個FileList序列，代表著由本地系統(tǒng)里選中的單個的文件組成的數(shù)組。用來選擇文件的用戶接口可以通過<input type=”file”>調(diào)用實現(xiàn)。
一個Blob接口，它代表原始二進制數(shù)據(jù)，通過Blob對象你可以訪問里面的字節(jié)數(shù)據(jù)。
一個File接口，它里面存有文件的只讀屬性信息，像文件名，文件類型，文件數(shù)據(jù)訪問的地址。
一個FileReader接口，它提供了讀取一個文件的方法，和一個獲取文件讀取結果的事件模型。
一個FileError接口和一個FileException對象，它們用來定義這個規(guī)范中的錯誤產(chǎn)生條件。
如何使用這個例子：在這個例子中，我給出了一個畫板，你可以從本地文件系統(tǒng)里拖拽進去一個圖片，或者你也可以用文件選擇框來選擇圖片。例子中，請只選擇圖片文件，我并沒有添加文件過濾和文件類型檢查。請記住，沒有一個瀏覽器完全實現(xiàn)了HTML5，這個例子需要在支持HTML5的瀏覽器上運行，比如Firefox3.5以上。

實現(xiàn)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>

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

看完上述內(nèi)容，你們對如何使用HTML5實現(xiàn)訪問本地文件有進一步的了解嗎？如果還想了解更多知識或者相關內(nèi)容，請關注億速云行業(yè)資訊頻道，感謝大家的支持。