anguarjs 上傳圖片預覽_圖片上傳預覽外掛製作思路及Demo分享
技術標籤：anguarjs 上傳圖片預覽html上傳圖片ie6多檔案上傳input 上傳圖片input上傳圖片layui多圖片上傳預覽刪除
背景
其實，圖片預覽功能非常地常見。所以就動手做了一個小外掛。在此分享一下思路。
實現圖片預覽的一些方法。瞭解了一下，其實方法都是大同小異的。大概有以下幾種方式：
- 訂閱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封裝。
2.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.2 定義匹配模式
因為是上傳圖片，除了在input裡面加了accept="image/*"，做了初步限制之外，還需要一個js的正則來通過路徑的檢測來判定是否為圖片。所以在prototype上面定義該模式以供兩個方法使用：
SetPreviewPic.prototype.pattern=new RegExp('\.(jpg|png|jpeg)$','i');
2.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='+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(nums2){//這裡加2是因為本來有一張預設的圖片，而且childNodes讀出來的長度會多1this.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('你上傳的圖片太大！');
}
}至此，就完成啦！
用法：