當前位置:首頁 > 新聞中心 > 常見問題
好料分享:JS圖片上傳預覽插件制作(兼容IE6)責任編輯 :李飛    文章來源 :星翼創想(www.vividpop.net)    發布時間 :2016-08-14    閱讀次數:4291     專題 :深圳網站建設

其實,圖片預覽功能非常地常見。很意外,之前遇到上傳圖片的時候都不需要預覽,也一直沒有去實現過?,F在手上的項目又需要有圖片預覽功能,所以就動手做了一個小插件。在此分享一下思路。

一、實現圖片預覽的一些方法。

了解了一下,其實方法都是大同小異的。大概有以下幾種方式:

①訂閱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">
div>
<input type="file" id="uploadBtn" accept="image/*" onchange="setPreviewPic()">

是不是想說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://www.vividpop.net/news/faq/1745.html

深圳市星翼創想網絡科技有限公司
廣東省深圳市羅湖區和平路3001號鴻隆世紀廣場B座13G
郵政編碼:518000
電話: 0755-82685986/82685936
微信: 159-8667-8737(微信同號)
郵箱: market@iswweb.com
傳真: 0755-82685820
微信小程序開發


不加微信即時溝通

深圳市星翼創想網絡科技有限公司 版權所有
粵ICP備10210107號 Copyright © 2010-2024 All Rights Reserved.
日本一本二卡三卡四卡_欧美开放黄色网址_亚洲国产精品无码久久九九_97久久超碰极品视觉盛宴