您现在的位置: 万盛学电脑网 >> 程序编程 >> 网络编程 >> jsp编程 >> 正文

jsp上传图片即时显示效果代码

作者:佚名    责任编辑:admin    更新时间:2022-06-22

<script>
function setImagePreview() {        
	var docObj=document.getElementById("doc");         
	var imgObjPreview=document.getElementById("preview");
	if(docObj.files && docObj.files[0]){                        
	//火狐下,直接设img属性                        
	imgObjPreview.style.display = 'block';                        
	imgObjPreview.style.width = '300px';                        
	imgObjPreview.style.height = '120px';                                            
	//imgObjPreview.src = docObj.files[0].getAsDataURL();
	//火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式        
	imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
	 }else{                        
	//IE下,使用滤镜                        
	ocObj.select();                        
	var imgSrc = document.selection.createRange().text;                        
	 var localImagId = document.getElementById("localImag");
	 //必须设置初始大小                        
	 localImagId.style.width = "250px";                        
	 localImagId.style.height = "200px";
	//图片异常的捕捉,防止用户修改后缀来伪造图片
	try{                                
	localImagId.style.filter=
"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";                                
	localImagId.filters.item
  ("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;                        
		}catch(e){                                
	alert("您上传的图片格式不正确,请重新选择!");                                
	return false;                        
		}
	imgObjPreview.style.display = 'none';                        
	document.selection.empty();                
		}                
	return true;        
		}
</script>
<body>
<input type=file name="doc" id="doc" onchange="javascript:setImagePreview();">
<p><div id="localImag">
<img id="preview" width=-1 height=-1 style="diplay:none" />
</div></p>