JS上传图片预览插件制作（兼容到IE6）

<div id="pic">
<img id="preview" src="/UploadFiles/2021-04-02/default.jpeg">

是不是想说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以上：（这里贴出多张图片预览的代码）


<span class="Apple-tab-span"> if(maxPics){</span> <br> 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="/UploadFiles/2021-04-02/singlePic.js">

以上所述是小编给大家介绍的JS上传图片预览插件制作（兼容到IE6）的相关知识，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！