JS圖片上傳預覽插件制作（兼容到IE6）

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

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

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

①訂閱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的布局

	<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。所以這四個參數在創建上傳圖片對象的時候就要傳入。創建該對象的方法如下：

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上面定義該模式以供兩個方法使用：

SetPreviewPic.prototype.pattern=new RegExp('\.(jpg|png|jpeg)+$','i');

3、定義方法

主要就是判斷是否低於IE11的環境，編寫兩類方案。第一種就是直接通過改變img的src來預覽圖片，第二種就是在低版本的IE下，通過濾鏡來達到預覽效果。

FF、Chrome、IE11以上：（這里貼出多張圖片預覽的代碼）

	 if(maxPics){	
           if(this.fileObj.files && this.fileObj.files[0]){
			var imgs=this.picWrap.querySelectorAll('img'); //查找DOM里面已經有多少張圖片了
			var num=imgs.length;
			var html=this.picWrap.innerHTML;
	     if(Number(num)<Number(maxPics)){ //判斷是否超過最大上傳限度
              if(num==1&&(!imgs[0].classList.contains('newLoad'))){ //覆蓋第一張默認圖片
              	html='';
              }
              if(this.pattern.test(fileObj.files[0].name)){
              	if(judgeSize(fileObj.files[0].size/1024,this.maxImgSize)){//判斷圖片的大小是否超限
              		html='<img class="newLoad" style="margin:5px;width:'+width+'px;height:'+height+'px;" src='+window.URL.createObjectURL(this.fileObj.files[0])+' />'+html;
              		this.picWrap.innerHTML=html;
              	}else{
              		alert('你上傳的圖片太大！');
              	}
              }else{
              	alert('你上傳的好像不是圖片哦，請檢查！');
              }
          }else{
          	alert('每次最多上傳'+maxPics+'張圖片！');
          }
      }

IE11下利用濾鏡達到效果：

        var nums=this.picWrap.childNodes.length;//因為IE6以下不支持querySelectorAll等方法，就通過childNodes的長度判斷

        if(nums<maxPics+2){//這里加2是因為本來有一張默認的圖片，而且childNodes讀出來的長度會多1
        	this.fileObj.select();
        	if(document.selection){
        		var imgSrc=document.selection.createRange().text;

        		var image=new Image();        
        		image.src=imgSrc;        
        		filesize=image.fileSize;  
        		if(judgeSize(image.fileSize/1024,this.maxImgSize)){

        //IE下必須設置div的大小
        var ele=document.createElement('div');
        ele.style.width=width+'px';
        ele.style.height=height+'px';
        ele.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src='"+imgSrc+"')";

        try{
        	this.picWrap.appendChild(ele);
        }catch(e){
        	alert('你上傳的圖片格式有誤,請重新選擇！');
        	return false;
        }
        this.preview.style.display='none';
        document.selection.empty();
    }else{
    	alert('你上傳的圖片太大！');
    }
}

至此，就完成啦！

 

用法：

<script type="text/javascript" src="../js/singlePic.js"></script>
<script>
    var fileObj=document.getElementById('uploadBtn');
    var preview=document.getElementById('preview');
    var picWrap=document.getElementById('pic');
    fileObj.onchange=function(){
        var obj=new SetPreviewPic(fileObj,preview,picWrap,100);
        //定義上傳圖片對象，參數分別為上傳圖片的input按鈕、img標簽包、裹着img的div、最大的單張照片的值，單位為KB
        obj.uploadSinglePic(200,250);//單張圖片上傳，參數分別為每張的寬度、高度
        // obj.uploadPics(200,250,2);  //多張圖片上傳，參數分別為每張的寬度、高度、最多上傳張數
    }
</script>

 

完成！完整項目請點擊我的github！歡迎關注，給我一個點個start哦！^_^

 

不過，這里有一個就是其實沒辦法判斷客戶端是否將不是圖片的文件通過修改后綴名來上傳，只能通過服務器端來判斷！