• 贵州省社科规划办与贵州日报社合作推出“文化贵州”专栏 2019-03-20
  • 就算不为了世界杯,俄罗斯也有那么多时髦好去处值得你飞去 2019-03-20
  • 山西十一选五前三直遗漏:JavaScript实现预览本地上传图片功能完整示例

    山西体彩11选5直选遗漏 www.caxru.com  更新时间:2019年03月08日 10:53:16   作者:Bug开发攻城狮   我要评论

    这篇文章主要介绍了JavaScript实现预览本地上传图片功能,结合完整实例形式分析了javascript图片预览相关的格式正则验证、浏览器判断、页面元素属性动态操作相关实现技巧,需要的朋友可以参考下

    本文实例讲述了JavaScript实现预览本地上传图片功能。分享给大家供大家参考,具体如下:

    <html>
    <head>
    <title>山西体彩11选5直选遗漏 www.caxru.com 图片上传预览</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>
      <div>
        <input type="file" onchange='PreviewImage(this)' />
        <div id="imgPreview" style='width: 500px; height: 400px;'>
          <img src="" />
        </div>
      </div>
    </body>
    </html>
    
    

    使用在线HTML/CSS/JavaScript代码运行工具//tools.jb51.net/code/HtmlJsRun测试上述代码,可得如下运行效果:

    更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript图片操作技巧大全》、《JavaScript切换特效与技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

    希望本文所述对大家JavaScript程序设计有所帮助。

    相关文章

    最新评论

  • 贵州省社科规划办与贵州日报社合作推出“文化贵州”专栏 2019-03-20
  • 就算不为了世界杯,俄罗斯也有那么多时髦好去处值得你飞去 2019-03-20