`

JS实现单图片预览，兼容IE、火狐

    博客分类：
  • JS
JS图片上传预览IE火狐 
阅读更多

实现的效果：单图片上传前预览

兼容性：

火狐：不是太低就成，我用了最近较新的几个版本，都没有问题

IE：暂时就用过IE8、9、10、11

 

HTML代码：

<body>
<div class="file-box">
<input type='text' name='textfield' id='textfield' class='systext' /> <!--文本框--> 
<input type='button' class='but uploadbtn' value='浏览...' /><!--浏览按钮-->
<input type="file" name="applogo" class="file" size="28" onchange="preview(this);" id="applogo"/> <!--真正的浏览按钮，用来打开上传页面，前面的“浏览”按钮掩盖此按钮，为好看-->
 </div>
<br />
<br />
<!--预览区-->
<div id="preview">
	<img src="1.jpg" width="297"/>  <!--只定义宽度就成，高度浏览器会等比例的自动调节-->      
</div>
</body>

 

样式：

<style type="text/css">  
body{ background:none;}
#imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}/*这个必须加，为IE*/	
.systext{width:238px; height:28px; line-height:28px; float:left; border:1px solid #ccc; }
.file-box{ position:relative;width:640px}
.uploadbtn{ height:30px;  width:60px; margin-left:3px; float:left;  }
.but { width:102px; height:25px; line-height:24px; margin-bottom: 3px; border:0px; background:#1381c9;  color: #fff; cursor:pointer; }
.file{ position:absolute; top:0px; left:0px; height:28px; filter:alpha(opacity:0);opacity: 0;width:310px; line-height:28px; }
</style>

 

 

导入的JQuery文件（用的是1.4.2的）：

<script type="text/javascript" src="jquery-1.4.2.js"></script>

 

 

JS文件：

<script type="text/javascript">
	//预览
function preview(file){
	document.getElementById("textfield").value=$(file).val();
	//判断当前上传的文件是不是图片文件
	if(!(/(?:jpg|gif|png)$/i.test(file.value))){//只判断jpg|gif|png格式，其他的格式可以往后追加
    	alert("只支持jpg、gif、png的图片");
    	$(file).val("");
    	return false;
	}
	var prevDiv = document.getElementById("preview");//获取预览区DIV对象
	if(file.files && file.files[0]){//火狐系列
		prevDiv.innerHTML="";
		prevDiv.innerHTML="<img id='imghead' width='297'/>";//浏览器等比例的自动调节
		var img = document.getElementById("imghead");
		var reader = new FileReader();
		reader.onloadend = function(evt){ 
		img.src=evt.target.result;
		};
		reader.readAsDataURL(file.files[0]);
	}else{//IE系列
		var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="'; 
		file.select();  
		var src = document.selection.createRange().text;
		prevDiv.innerHTML="";
		prevDiv.innerHTML = "<div id='divhead' style='width:297px;height:187px;"+sFilter+src+"\"'></div>";//用style定义的样式，浏览器好像不会自动调节，所以得自定义

	 }   
}
</script>

 

以上实现的是单图片的预览，以下是多图片的预览，因为用的是FileReader而IE系列不支持这个，所以不兼容IE。

HTML

<body>
<div class="file-box">
<input type='text' name='textfield' id='textfield' class='systext' /> <!--文本框--> 
<input type='button' class='but uploadbtn' value='浏览...' /><!--浏览按钮-->
<input type="file" name="applogo" class="file" size="28" onchange="preview(this);" 
id="applogo" multiple="multiple"/>
<!--真正的浏览按钮，用来打开上传页面，前面的“浏览”按钮掩盖此按钮，为好看-->
 </div>
<br />
<br />
<!--预览区-->
<div id="preview"></div>
</body>
 Style： 
<style type="text/css">  
body{ background:none;}	
.systext{width:238px; height:28px; line-height:28px; float:left; border:1px solid #ccc; }
.file-box{ position:relative;width:640px}
.uploadbtn{ height:30px;  width:60px; margin-left:3px; float:left;  }
.but { width:102px; height:25px; line-height:24px; margin-bottom: 3px; border:0px; background:#1381c9;  color: #fff; cursor:pointer; }
.file{ position:absolute; top:0px; left:0px; height:28px; filter:alpha(opacity:0);opacity: 0;width:310px; line-height:28px; }
.thumb {border: 1px solid #000; height: 75px; margin: 10px 5px 0 0;}
img {height: auto; max-width: 100%;vertical-align: middle;border: 0 none;}
</style>

 

导入的JQuery文件（用的是1.4.2的）：

<script type="text/javascript" src="jquery-1.4.2.js"></script>

 

JS：

<script type="text/javascript">
	//预览
function preview(file){
	//document.getElementById("textfield").value=$(file).val();
	var prevDiv = document.getElementById("preview");//获取预览区DIV对象
	if(file.files && file.files[0]){//火狐系列
		prevDiv.innerHTML="";
		for(var i=0;i<file.files.length;i++){
		        var f=file.files[i]; 
			//判断当前上传的文件是不是图片文件
			if(!(/image\/.*/i.test(f.type))){
    			alert("第"+(i+1)+"个文件不是图片类型");
    			continue;
			}		
        var reader = new FileReader();
        reader.onload = (function(file) {
            return function(e) {
                var span = document.createElement('span');
                span.innerHTML = '<img class="thumb" src="'+ this.result +'" title="'+ file.name +'" />';
                prevDiv.insertBefore(span, null);//将span添加到预览区
            };
        })(f);
        //读取文件内容
        reader.readAsDataURL(f);
	}
	} 
}
</script>
 多图片预览功能时参考这里的：http://blog.csdn.net/zhu1988renhui/article/details/7936525，这个链接对FileReader讲的比较详细，还有图片缩放、进度条什么的，大家可以参考参考！
分享到：
| 使用Ext创建多柱、折线统计图（动态加载数 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics