夏日博客

A-A+

js 本地图片上传预览实现代码

2016年01月18日 前端设计 暂无评论 阅读 5 views 次

下面介绍的代码只支持ie,ff浏览器,其它的暂时不支持哦,google浏览器暂时无法解决这个问题,下面看我给出的两个实例.

IE 浏览器下,代码如下:

  1. document.getElementById("upload").onchange = function()   
  2. {       
  3.  document.getElementById("image").src = this.value;   
  4. }  

FF下有getAsDataURL的方法可以生成图片的DataURL,代码如下:

  1. document.getElementById("upload").onchange = function()   
  2. {       
  3.  document.getElementById("image").src = this.files[0].getAsDataURL();   
  4. }  

我们把上面的代码总结一下,代码如下:

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <script type="text/javascript">  
  6.  /**  
  7.   * 从 file 域获取 本地图片 url  
  8.   */  
  9.  function getFileUrl(sourceId) {  
  10.   var url;  
  11.   if (navigator.userAgent.indexOf("MSIE")>=1) { // IE  
  12.    url = document.getElementById(sourceId).value;  
  13.   } else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox  
  14.    url = document.getElementById(sourceId).files.item(0).getAsDataURL();  
  15.   }  
  16.   return url;  
  17.  }  
  18.  /**  
  19.   * 将本地图片 显示到浏览器上  
  20.   */  
  21.  function preImg(sourceId, targetId) {  
  22.   var url = getFileUrl(sourceId);  
  23.   var imgPre = document.getElementById(targetId);  
  24.   imgPre.src = url;  
  25.  }  
  26. </script>  
  27. </head>  
  28. <body>  
  29.  <form action="">  
  30.   <input type="file" name="imgOne" id="imgOne" onchange="preImg(this.id,'imgPre');" />  
  31.   <img id="imgPre" src="" width="300px" height="300px" style="display: block;" />  
  32.  </form>  
  33. </body>  
  34. </html>  

用DOM来创建对象.

在上面的XHTML代码中,我们为了预览图片,事先加入了一个没有设置src的img对象,除去不美观、代码冗余之外,如果用户浏览器不支持Javascript,他不仅无法使用这个功能,还要接受页面上一个永远不会显示出来的破图,要解决这个问题,我们就需要在“运行时”再生成这个img对象,途径还是DOM,代码如下:

  1. <input type=file name="doc" id="doc" onchange="javascript:setImagePreview();">  
  2. <p>  
  3. <div id="localImag"><img id="preview" width=-1 height=-1 style="diplay:none" /></div>  
  4. </p>  
  5. <script>  
  6. function setImagePreview() {  
  7.     var docObj=document.getElementById("doc");  
  8.     var fileName = docObj.value;  
  9.     var imgObjPreview=document.getElementById("preview");  
  10.         if(docObj.files &&  docObj.files[0]){  
  11.             //火狐下，直接设img属性  
  12.             imgObjPreview.style.display = 'block';  
  13.             imgObjPreview.style.width = '150px';  
  14.             imgObjPreview.style.height = '120px';             
  15.             imgObjPreview.src = docObj.files[0].getAsDataURL();  
  16.         }else{  
  17.             //IE下，使用滤镜  
  18.             docObj.select();  
  19.             var imgSrc = document.selection.createRange().text;  
  20.             var localImagId = document.getElementById("localImag");  
  21.             //必须设置初始大小  
  22.             localImagId.style.width = "150px";  
  23.             localImagId.style.height = "120px";  
  24.             //图片异常的捕捉，防止用户修改后缀来伪造图片  
  25.             try{  
  26.                 localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";  
  27.                 localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;  
  28.             }catch(e){  
  29.                 alert("您上传的图片格式不正确，请重新选择!");  
  30.                 return false;  
  31.             }  
  32.             imgObjPreview.style.display = 'none';  
  33.             document.selection.empty();  
  34.         }  
  35.         return true;  
  36.     }  
  37. </script>  
标签：

给我留言