一、前言

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

二、FileReader

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

PC端兼容列表

平面設(shè)計培訓(xùn),網(wǎng)頁設(shè)計培訓(xùn),美工培訓(xùn),游戲開發(fā),動畫培訓(xùn)

移動端兼容列表 

平面設(shè)計培訓(xùn),網(wǎng)頁設(shè)計培訓(xùn),美工培訓(xùn),游戲開發(fā),動畫培訓(xùn)

網(wǎng)友評論