本篇內(nèi)容介紹了“HTML5怎么實(shí)現(xiàn)訪問本地文件”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、微信平臺小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了橫縣免費(fèi)建站歡迎大家使用！

在前面的幾篇文章里，我向大家共享了幾個HTML5的例子，分別是拖拽功能演示，頁面內(nèi)容可編輯化演示 和 本地存儲功能演示。 今天，我將向大家分享一個簡單的應(yīng)用，用來演示使用FileReader的方法, FileReader是HTML5里提供的一個文件操作API。

當(dāng)你在看我前面所寫的HTML 5例子時(shí)，我正在思考創(chuàng)建一個簡單但又適用的例子、以一種更新奇的方式來演練這些HTML5新特性。我的目標(biāo)并不是想單純的展示這些HTML 5 API，而是想用例子來告訴開發(fā)人員如何真正的以一種實(shí)用的和創(chuàng)新的方式實(shí)現(xiàn)這些API。

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

實(shí)現(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(&lsquo;span&lsquo;);
span.innerHTML = ['<img class="images" src="', e.target.result,'" title="', aFile.name, '"/>'].join(”);
document.getElementById(&lsquo;thumbs&rsquo;).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&Prime; ondragenter=”return false” ondragover=”return false” ondrop=”dropIt(event)”>
<output id=”thumbs”></output>
</td>

這個例子中，我只是拖拽本地文件到畫板里。

“HTML5怎么實(shí)現(xiàn)訪問本地文件”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

文章標(biāo)題：HTML5怎么實(shí)現(xiàn)訪問本地文件-創(chuàng)新互聯(lián)
網(wǎng)站URL：http://m.newbst.com/article40/dephho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、標(biāo)簽優(yōu)化、靜態(tài)網(wǎng)站、定制網(wǎng)站、外貿(mào)建站、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)