在上传图片之前回显图片

页面代码:

<div id="imgDiv">
    <img id="imgFile"  width='80' height='80'/>
</div>
<input type="file" name="sysPicture" id="titleImg" accept="image/*" required="true" onChange="setImagePreview(this,imgDiv,imgFile);"/>

引入js(忘了是网上哪位大佬写的):

<!-- 引用上传图片预览js -->
<script type="text/javascript" src="${pageContext.request.contextPath}/my_js/imgPreview.js"></script>

js源码:

function setImagePreview(docObj, localImagId, imgObjPreview) {
   var name = docObj.value;
   var type = name.split(".");
   type = type[type.length - 1];
   if ("jpg" != type && "png" != type && "jpeg" != type && "gif" != type) {
      alert("错误的类型，请选择图片");
      document.getElementById("titleImg").value = null;// 防止将非图片类型上传
        $("#imgFile").prop("src","");// 清空图片显示
      return;
   }

   if (docObj.files && docObj.files[0]) {

      // alert("hello"+docObj.files[0]);
      // 火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
      document.getElementById("imgDiv").style.display = "block";
      document.getElementById("imgFile").src = window.URL
            .createObjectURL(docObj.files[0]);
   } else {
      // IE下，使用滤镜
      docObj.select();
      var imgSrc = document.selection.createRange().text;

      // 必须设置初始大小
      localImagId.style.width = "300px";
      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;
}

accept="image/*"

该属性可以使点击上传时,筛选掉除图片和文件夹外的文件

在上传图片之前回显图片

猜你喜欢