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

	<div id="pic">
		<img id="preview" src="../imgs/default.jpeg">
	</div>
	<input type="file" id="uploadBtn" accept="image/*" onchange="setPreviewPic()">

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

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

	 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+'张图片！');
          }
      }

        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>