预览上传图片

Posted 2020-07-27 hhls

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了预览上传图片相关的知识，希望对你有一定的参考价值。

转自：http://canglang0.iteye.com/blog/1662268
<%@ page contentType="text/html;charset=UTF-8"%>
<html> 
 <head> 
  <title>图片上传预览</title> 
  <script> 
   function PreviewImage(imgFile) 
   { 
    var pattern = /(\.*.jpg$)|(\.*.png$)|(\.*.jpeg$)|(\.*.gif$)|(\.*.bmp$)/;      
    if(!pattern.test(imgFile.value)) 
    { 
     alert("系统仅支持jpg/jpeg/png/gif/bmp格式的照片！");  
     imgFile.focus(); 
    } 
    else 
    { 
     var path; 
     if(document.all)//IE 
     { 
      imgFile.select(); 
      path = document.selection.createRange().text; 
      document.getElementById("imgPreview").innerHTML=""; 
      document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=‘true‘,sizingMethod=‘scale‘,src=\"" + path + "\")";//使用滤镜效果 
     } 
     else//FF 
     { 
      path = URL.createObjectURL(imgFile.files[0]);
      document.getElementById("imgPreview").innerHTML = "<img src=‘"+path+"‘/>"; 
     } 
    } 
   } 
  </script> 
 </head> 
 <body> 
  <center>
   <input type="file" onchange=‘PreviewImage(this)‘ /> 
   <div id="imgPreview" style=‘width:500px; height:400px;‘> 
    <img src=""/> 
   </div> 
  </center>
 </body> 
</html>

以上是关于预览上传图片的主要内容，如果未能解决你的问题，请参考以下文章

9行代码实现图片上传和预览(自定义按钮上传)