图片上传预览

最新推荐文章于 2022-08-23 11:53:02 发布

hezecyf

最新推荐文章于 2022-08-23 11:53:02 发布

阅读量163

点赞数

分类专栏： Easyui 文章标签： Easyui jquery js jsp ViewUI

本文链接：https://blog.csdn.net/iteye_3314/article/details/82651889

版权

Easyui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

选择一张图片，先预览，然后上传该图片


<div style="width: 120px;height: 128px;border: 1px solid red; margin-left: 30px;padding: 2px;" id="localImag" >
<img name="showimg" id="showimg" src="" width="116px" height="125px" alt="照片预览"  class="showimg" /> 
</div>
<input name="imgfile" type="file" id="imgfile" class="imgfile" onchange="setImagePreview();"  size="3" style="margin-left: 30px;" />


function setImagePreview() {
	 var docObj=document.getElementById("imgfile");
	 var imgObjPreview=document.getElementById("showimg");
	 if(docObj.files && docObj.files[0]){
		  var imgSrcx =docObj.value;
		  if (!/\.(jpg|jpeg|png|JPG|PNG|JPEG|gif|GIF)$/.test(imgSrcx)) {
              alertMsg.warn("您上传的图片格式不正确，请重新选择!");
              return false;
          }
    	  //火狐下，直接设img属性
    	  //imgObjPreview.src = docObj.files[0].getAsDataURL();
    	  //火狐7以上版本不能用上面的getAsDataURL()方式获取
    	  imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
	 }else{
	 	 //IE下，使用滤镜
	 	 docObj.select();
    	  var imgSrc = document.selection.createRange().text;
    	  if (!/\.(jpg|jpeg|png|JPG|PNG|JPEG|gif|GIF)$/.test(imgSrc)) {
    		  alertMsg.warn("您上传的图片格式不正确，请重新选择!");
              return false;
          }
    	  var localImagId = document.getElementById("localImag");
    	  //图片异常的捕捉，防止用户修改后缀来伪造图片
    	  try{
    	   localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
    	   localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
    	  }catch(e){
    		  alertMsg.warn("您上传的图片格式不正确，请重新选择!");
    	   return false;
    	  }
    	  imgObjPreview.style.display = 'none';
    	  document.selection.empty();
	 }
	 return true;
	}