未知的東西上傳到服務(wù)器上，有可能產(chǎn)生安全問(wèn)題，也有可能體積太大，超過(guò)允許，浪費(fèi)空間。現(xiàn)在好了，WEB技術(shù)在進(jìn)步，HTML5帶來(lái)了很多好東西。這個(gè)FileReader API就能讓你在用戶上傳之前就能獲取上傳文件的一些基本屬性。

HTML代碼

這個(gè)FileReader API 的工作原理和 File API 一樣，需要使用input[type="file"] 元素：

<-- 一個(gè)能上傳多媒體文件的表單 -->


<-- 顯示圖片的地方 -->

在File API這篇文章里有詳細(xì)的關(guān)于能讀取到的文件的相關(guān)信息，比如地址，體積，尺寸大小，文件類型等等。

JavaScript

這個(gè)例子中我們用input表單域上傳一張圖片，當(dāng)用戶在自己的電腦里選中一張圖片后，這個(gè)圖片會(huì)被顯示到頁(yè)面上：

這個(gè)例子里，我們使用FileReader里的readAsDataURL方法將圖片內(nèi)容轉(zhuǎn)換成base64編碼的字符串，然后使用圖片的data URI方式顯示它。其它的FileReader讀取方法還有readAsText, readAsArrayBuffer和readAsBinaryString等

有了這個(gè)FileReader API，我們就可以避免用戶先將文件上傳到服務(wù)器，在瀏覽器客戶端我們就可以進(jìn)行操作。這些在上傳到服務(wù)器前的預(yù)處理是很有必要的。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com