html+js实现图片上传前预先预览

来源：互联网发布：java mongodb 连接池编辑：程序博客网时间：2024/06/15 19:07
<html><head><script type="text/javascript">  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 = '90px';          imgObjPreview.style.height = '120px';                              //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;          var localImagId = document.getElementById("localImag");          //必须设置初始大小          localImagId.style.width = "90px";          localImagId.style.height = "120px";          //图片异常的捕捉，防止用户修改后缀来伪造图片          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>  </head><body><div id="localImag" style="width:130px;text-align:center; margin-left:auto; margin-right:auto;"><img id="preview" style="width:90px; height:120px;" runat="server" /></div>                                        <p><input type=file name="doc" id="doc" onchange="javascript:setImagePreview();"></p></body>
阅读全文
0 0