快捷導(dǎo)航

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

更新時(shí)間：2016年08月07日 09:20:57 作者：小蚊

這篇文章主要介紹了JS上傳圖片預(yù)覽插件制作（兼容到IE6）的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

一、實(shí)現(xiàn)圖片預(yù)覽的一些方法。

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

①訂閱input[type=file]元素的onchange事件.

一旦選擇的路徑被改變就把圖片上傳至服務(wù)器，然后就返回圖片在服務(wù)器端的地址，并且賦值到img元素上。

缺點(diǎn)：工作量大，有些上傳并不是用戶最終需要上傳的圖片，但是這種方式會(huì)把上傳過(guò)程中選擇過(guò)的圖片都保存至服務(wù)器端，會(huì)造成資源浪費(fèi)，而且服務(wù)器端清理臨時(shí)的那些預(yù)覽圖片也需要一定的工作量。

②利用HTML5的新特性FileReader。

這個(gè)對(duì)象提供了很多相關(guān)的方法，其中最主要用到readAsDataURL這個(gè)方法。點(diǎn)我了解更多。

缺點(diǎn)：通過(guò)FileReader的readAsDataURL方法獲取的Data URI Scheme會(huì)生成一串很長(zhǎng)的base64字符串，若圖片較大那么字符串則更長(zhǎng)，若頁(yè)面出現(xiàn)reflow時(shí)則會(huì)導(dǎo)致性能下降。且瀏覽器支持情況不一致，支持的瀏覽器：FF3.6+，Chrome7+，IE10+。

③使用window.URL.createObjectURL代替FileReader，再用DXImageTransform.Microsoft.AlphaImageLoader濾鏡兼容IE。

缺點(diǎn)：由于IE11作了安全方面的考慮，使得在input[type=file]元素上通過(guò)value、outerHTML和getAttribute的方式都無(wú)法獲取用戶所選文件的真實(shí)地址，只能獲取到

D:\frontEnd\文件名稱。因此需使用document.selection.createRangeCollection方法來(lái)獲取真實(shí)地址。

二、我的插件制作

我選擇了比較保守的方法，就是第三種使用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()">

是不是想說(shuō)so easy？

②第二步，插件js封裝。

1、建立對(duì)象

我主要采用了組合繼承的方式，封裝了兩個(gè)方法，分別是單張圖片上傳和多張圖片上傳。因?yàn)闊o(wú)論是單張圖片上傳還是單張圖片上傳，都需要傳入、上傳圖片的input按鈕、img標(biāo)簽、包裹著img的div、最大的單張照片的值，單位為KB。所以這四個(gè)參數(shù)在創(chuàng)建上傳圖片對(duì)象的時(shí)候就要傳入。創(chuàng)建該對(duì)象的方法如下：

var SetPreviewPic=function(fileObj,preview,picWrap,maxImgSize){
this.fileObj=fileObj;
this.preview=preview;
this.picWrap=picWrap;
this.maxImgSize=maxImgSize;
}

2、定義匹配模式

因?yàn)槭巧蟼鲌D片，除了在input里面加了accept="image/*"，做了初步限制之外，還需要一個(gè)js的正則來(lái)通過(guò)路徑的檢測(cè)來(lái)判定是否為圖片。所以在prototype上面定義該模式以供兩個(gè)方法使用：

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

3、定義方法

主要就是判斷是否低于IE11的環(huán)境，編寫(xiě)兩類方案。第一種就是直接通過(guò)改變img的src來(lái)預(yù)覽圖片，第二種就是在低版本的IE下，通過(guò)濾鏡來(lái)達(dá)到預(yù)覽效果。

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

<span class="Apple-tab-span"> if(maxPics){</span> <br> if(this.fileObj.files && this.fileObj.files[0]){
var imgs=this.picWrap.querySelectorAll('img'); //查找DOM里面已經(jīng)有多少?gòu)垐D片了
var num=imgs.length;
var html=this.picWrap.innerHTML;
if(Number(num)<Number(maxPics)){ //判斷是否超過(guò)最大上傳限度
if(num==1&&(!imgs[0].classList.contains('newLoad'))){ //覆蓋第一張默認(rèn)圖片
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('你上傳的好像不是圖片哦，請(qǐng)檢查！');
}
}else{
alert('每次最多上傳'+maxPics+'張圖片！');
}
}

IE11下利用濾鏡達(dá)到效果：

var nums=this.picWrap.childNodes.length;//因?yàn)镮E6以下不支持querySelectorAll等方法，就通過(guò)childNodes的長(zhǎng)度判斷
if(nums<maxPics+2){//這里加2是因?yàn)楸緛?lái)有一張默認(rèn)的圖片，而且childNodes讀出來(lái)的長(zhǎng)度會(huì)多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下必須設(shè)置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('你上傳的圖片格式有誤,請(qǐng)重新選擇！');
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);
//定義上傳圖片對(duì)象，參數(shù)分別為上傳圖片的input按鈕、img標(biāo)簽包、裹著img的div、最大的單張照片的值，單位為KB
obj.uploadSinglePic(200,250);//單張圖片上傳，參數(shù)分別為每張的寬度、高度
// obj.uploadPics(200,250,2); //多張圖片上傳，參數(shù)分別為每張的寬度、高度、最多上傳張數(shù)
}
</script>

以上所述是小編給大家介紹的JS上傳圖片預(yù)覽插件制作（兼容到IE6）的相關(guān)知識(shí)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

您可能感興趣的文章: