問題描述

HTML5怎么訪問本地文件？

問題解答

HTML5怎么訪問本地文件？-PHP中文網問答-HTML5怎么訪問本地文件？-PHP中文網問答

圍觀一下哦，學習一下。

在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的主要方法非常的簡單，就像下面：

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>