一、前言
這兩天恰好有一位同事問(wèn)我怎樣做一個(gè)圖片預(yù)覽功能。作為現(xiàn)代人的我們首先想到的當(dāng)然是HTML5啦，其實(shí)HTML5做圖片預(yù)覽已經(jīng)是一個(gè)老生常談的問(wèn)題了。我在這里就簡(jiǎn)單說(shuō)說(shuō)其中相關(guān)的一些東西，當(dāng)然會(huì)附上我們的源碼。在 HTML5 之前我們做圖片預(yù)覽主流做法有兩種,第一種是通過(guò) Flash 插件來(lái)做預(yù)覽，第二種是 Ajax 實(shí)現(xiàn)的假預(yù)覽，也就是說(shuō)選擇圖片文件后，圖片其實(shí)已經(jīng)異步上傳到服務(wù)器，服務(wù)器處理后返回圖片路徑，前端得到響應(yīng)結(jié)果做出處理從而使圖片顯示在界面上。而有了 HTML5 之后就可以強(qiáng)烈鄙視上面兩種做法了。
二、FileReader
要做圖片預(yù)覽功能，就不得不介紹一下 FileReader，顧名思義，它是用來(lái)讀取文件的。當(dāng)然新東西總會(huì)有一些頑固派排斥的，我們先來(lái)看看其兼容性如何（這不是本文討論的重點(diǎn)）。
PC端兼容列表
移動(dòng)端兼容列表
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動(dòng)安全 [無(wú)線安全]玩轉(zhuǎn)無(wú)線電——不安全的藍(lán)牙鎖 2017-07-26
- 消息隊(duì)列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】 2017-07-26
- 詞向量-LRWE模型-更好地識(shí)別反義詞同義詞 2017-07-26
- 從棧不平衡問(wèn)題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實(shí)現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- 阿里移動(dòng)安全 Android端惡意鎖屏勒索應(yīng)用分析 2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來(lái)看看(二) 2017-07-26
學(xué)習(xí)是年輕人改變自己的最好方式