一、前言

這兩天恰好有一位同事問我怎樣做一個(gè)圖片預(yù)覽功能。作為現(xiàn)代人的我們首先想到的當(dāng)然是HTML5啦，其實(shí)HTML5做圖片預(yù)覽已經(jīng)是一個(gè)老生常談的問題了。我在這里就簡(jiǎn)單說說其中相關(guān)的一些東西，當(dāng)然會(huì)附上我們的源碼。在 HTML5 之前我們做圖片預(yù)覽主流做法有兩種,第一種是通過 Flash 插件來做預(yù)覽，第二種是 Ajax 實(shí)現(xiàn)的假預(yù)覽，也就是說選擇圖片文件后，圖片其實(shí)已經(jīng)異步上傳到服務(wù)器，服務(wù)器處理后返回圖片路徑，前端得到響應(yīng)結(jié)果做出處理從而使圖片顯示在界面上。而有了 HTML5 之后就可以強(qiáng)烈鄙視上面兩種做法了。

二、FileReader

要做圖片預(yù)覽功能，就不得不介紹一下 FileReader，顧名思義，它是用來讀取文件的。當(dāng)然新東西總會(huì)有一些頑固派排斥的，我們先來看看其兼容性如何（這不是本文討論的重點(diǎn)）。

PC端兼容列表

移動(dòng)開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),手機(jī)維修培訓(xùn),手機(jī)軟件培訓(xùn)

移動(dòng)端兼容列表 

移動(dòng)開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),手機(jī)維修培訓(xùn),手機(jī)軟件培訓(xùn)

兼容性的話大家根據(jù)自己的需求參考一下上面的對(duì)照表，我們接著來看看 FileReader 的幾個(gè)常用屬性和常用方法

屬性

  1. FileReader.onload 讀取完成

  2. FileReader.result 讀取結(jié)果

  3. FileReader.error 讀取錯(cuò)誤

  4. FileReader.readyState 前文檔的狀態(tài)

方法

  1. FileReader.abort() 中斷讀取-無參數(shù)

  2. FileReader.readAsArrayBuffer