图片上传预览

最新推荐文章于 2021-06-02 15:36:20 发布

yongjiandan

最新推荐文章于 2021-06-02 15:36:20 发布

阅读量891

点赞数

分类专栏： J2EE 文章标签： javascript

本文链接：https://blog.csdn.net/yongjiandan/article/details/40428961

版权

J2EE 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

在网上找了些资料进行整合，不多说，直接上代码

<span style="white-space:pre">	</span>var getPath=function(obj,fileQuery,transImg){ 
		if(window.navigator.userAgent.indexOf("MSIE")>=1){ 
			obj.setAttribute("src",transImg); 
			
		} else { 
			var file =fileQuery.files[0];  
			var reader = new FileReader();  
			reader.onload = function(e){ 
				obj.setAttribute("src",e.target.result) 
			} 
			reader.readAsDataURL(file);  
		} 
	} 
	
	function getPreImg(e){
		var file_img=document.getElementById("showImg"); 
		getPath(file_img,e,e.value); 
	}

<span style="white-space:pre">	</span><div>
		<img id="showImg" src=""  width="100" height="80">
	</div>
	<div>
		<input οnchange="getPreImg(this);" id="uploadField" name="fileName" encType="multipart/form-data" method="post" type="file" size="60" maxlength="60">	
	</div>

>>>>>>>>>>>>>>>>>>>>>>>>以下为网上找到的资料<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

在处理表单的时候，如果input类型为file时，FF，chrome，IE8获取文件时获取到一个fakepath，而不是真正的文件地址；不过ie6，ie7却可以获取，在IE8之后，安全级别提高了。但是，当出现一个客户端图片预览这样的需求的时候，对于不同浏览器就要采用不用的策略了；IE可以使用滤镜，chrome等可以使用HTML5的方式，ie8 input，具体如下：

<img id="file_img" src="http://www.09687.com/tourl/op/xx" width="100" height="100"/>
<script type="text/javascript">
var getPath=function(obj){
obj.select();
var path=document.selection.createRange().text;
obj.removeAttribute("src");
obj.style.filter=
"alpha(opacity=0);progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+path+"', sizingMethod='scale');";
}
</script>

复制代码

这样，通过滤镜的方式获得path，fakepath，不过，使用滤镜时，图片的左上角会出现一个小图标，这时，我们可以绕弯的用一个透明图片作为file_img的src，占用这个src，ie8 input，使得小图片被显示为透明;
对于FF，网上有一种流传很久的使用getAsDataURL方法来获取的方法，fakepath，比如：

function getFullPath(obj){
if(obj){
if (window.navigator.userAgent.indexOf("MSIE")>=1){
obj.select();
return document.selection.createRange().text;
}
else if(window.navigator.userAgent.indexOf("Firefox")>=1){
if(obj.files){
return obj.files.item(0).getAsDataURL();
}
return obj.value;
}
return obj.value;
}
}

复制代码

不过，我们可以使用html5的方法来兼容FF，HTML5 File API中定义了一个BlobReader，通过它可以使用各种不同的方式读入文件并且可以监听和处理读取文件过程中的各个状态。不过在Firefox与Chrome的实现中，并没有这样一个BlobReader，取而代之的是FileReader，拥有与BlobReader相同的方法和事件。
比如：

function getPath(obj,fileQuery){
var file =fileQuery.files[0];
var reader = new FileReader();
reader.onload = function(e){
obj.setAttribute("src",e.target.result)
}
reader.readAsDataURL(file);
}

复制代码

chrome的解决办法也和FF的一样，使用FileReader对象来实现，fakepath，接下来，我们需要一个完全兼容的版本；

/*fileQuery是指input type为file的对象，在事件中使用this来替代，fakepath，
比如:obj.onChange=function(){
var file_img=document.getElementById("img");
getPath(file_img,this,transImg);
}
transImg是解决IE左上角图标的那张透明图片的路径;*/
var getPath=function(obj,fileQuery,transImg){
if(window.navigator.userAgent.indexOf("MSIE")>=1){
obj.select();
var path=document.selection.createRange().text;
obj.removeAttribute("src");
obj.setAttribute("src",transImg);
obj.style.filter=
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+path+"', sizingMethod='scale');";
}
else{
var file =fileQuery.files[0];
var reader = new FileReader();
reader.onload = function(e){
obj.setAttribute("src",e.target.result)
}
reader.readAsDataURL(file);
}
}