jsp预览本地上传图片

最新推荐文章于 2018-08-07 23:34:47 发布

canglang0

最新推荐文章于 2018-08-07 23:34:47 发布

阅读量141

点赞数 1

分类专栏： jsp

本文链接：https://blog.csdn.net/canglang0/article/details/84278292

版权

jsp 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<%@ 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" οnchange='PreviewImage(this)' />
   <div id="imgPreview" style='width:500px; height:400px;'>
    <img src=""/>
   </div>
  </center>
</body>
</html>

canglang0

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jsp预览本地上传图片

&lt;%@ page contentType="text/html;charset=UTF-8"%&gt;&lt;html&gt; &lt;head&gt; &lt;title&gt;图片上传预览&lt;/title&gt; &lt;script&gt; function PreviewImage(imgFile) { var pattern = /(\.*.j
复制链接

扫一扫

专栏目录