其實，圖片預覽功能非常地常見。很意外，之前遇到上傳圖片的時候都不需要預覽，也一直沒有去實現過。現在手上的項目又需要有圖片預覽功能，所以就動手做了一個小插件。在此分享一下思路。
一、實現圖片預覽的一些方法。
了解了一下，其實方法都是大同小異的。大概有以下幾種方式：
①訂閱input[type=file]元素的onchange事件.
一旦選擇的路徑被改變就把圖片上傳至服務器，然后就返回圖片在服務器端的地址，并且賦值到img元素上。
缺點：工作量大，有些上傳并不是用戶最終需要上傳的圖片，但是這種方式會把上傳過程中選擇過的圖片都保存至服務器端，會造成資源浪費，而且服務器端清理臨時的那些預覽圖片也需要一定的工作量。
②利用HTML5的新特性FileReader。
這個對象提供了很多相關的方法，其中最主要用到readAsDataURL這個方法。點我了解更多。
缺點：通過FileReader的readAsDataURL方法獲取的Data URI Scheme會生成一串很長的base64字符串，若圖片較大那么字符串則更長，若頁面出現reflow時則會導致性能下降。且瀏覽器支持情況不一致，支持的瀏覽器：FF3.6+，Chrome7+，IE10+。
③使用window.URL.createObjectURL代替FileReader，再用DXImageTransform.Microsoft.AlphaImageLoader濾鏡兼容IE。
缺點：由于IE11作了安全方面的考慮，使得在input[type=file]元素上通過value、outerHTML和getAttribute的方式都無法獲取用戶所選文件的真實地址，只能獲取到
D:\frontEnd\文件名稱。因此需使用document.selection.createRangeCollection方法來獲取真實地址。
二、我的插件制作
我選擇了比較保守的方法，就是第三種使用window.URL.createObjectURL代替FileReader，再用DXImageTransform.Microsoft.AlphaImageLoader濾鏡兼容IE的方法啦。
①第一步，HTML的布局
1 2 3 4 | <div id="pic"> <img id="preview" src="../imgs/default.jpeg"> |
是不是想說so easy？
②第二步，插件js封裝。
1、建立對象
我主要采用了組合繼承的方式，封裝了兩個方法，分別是單張圖片上傳和多張圖片上傳。因為無論是單張圖片上傳還是單張圖片上傳，都需要傳入、上傳圖片的input按鈕、img標簽、包裹著img的div、最大的單張照片的值，單位為KB。所以這四個參數在創建上傳圖片對象的時候就要傳入。創建該對象的方法如下：
1 2 3 4 5 6 | var SetPreviewPic=function(fileObj,preview,picWrap,maxImgSize){ this.fileObj=fileObj; this.preview=preview; this.picWrap=picWrap; this.maxImgSize=maxImgSize;} |
2、定義匹配模式
因為是上傳圖片，除了在input里面加了accept="image/*"，做了初步限制之外，還需要一個js的正則來通過路徑的檢測來判定是否為圖片。所以在prototype上面定義該模式以供兩個方法使用：
1 | SetPreviewPic.prototype.pattern=new RegExp('\.(jpg|png|jpeg)+$','i'); |
3、定義方法
主要就是判斷是否低于IE11的環境，編寫兩類方案。第一種就是直接通過改變img的src來預覽圖片，第二種就是在低版本的IE下，通過濾鏡來達到預覽效果。
FF、Chrome、IE11以上：（這里貼出多張圖片預覽的代碼）
1 2 3 4 5 6 文章轉載請保留網址：http://cctvsc.cn/news/faq/1745.html
推薦文章
最新文章
|
