脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js图片上传预览

JS实现图片上传预览功能

 更新时间：2016年11月21日 16:53:09   作者：Kilven_ck  
本文给大家分享一段js代码关于实现图片上传预览功能，代码简单易懂，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧

废话不多说了，直接给大家贴js代码了，具体代码如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title></title>
</head>
<body>
  <div id="divPreview">
    <img id="imgHeadPhoto" src="noperson.jpg" style="width: 160px; height: 170px; border: solid 1px #d2e2e2;"
      alt="" />
  </div>
  <input type="file" onchange="PreviewImage(this,'imgHeadPhoto','divPreview');" size="20" />
  <script type="text/javascript">
    //js本地图片预览，兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3
    function PreviewImage(fileObj, imgPreviewId, divPreviewId) {
      var allowExtention = ".jpg,.bmp,.gif,.png"; //允许上传文件的后缀名document.getElementById("hfAllowPicSuffix").value;
      var extention = fileObj.value.substring(fileObj.value.lastIndexOf(".") + 1).toLowerCase();
      var browserVersion = window.navigator.userAgent.toUpperCase();
      if (allowExtention.indexOf(extention) > -1) {
        if (fileObj.files) {//HTML5实现预览，兼容chrome、火狐7+等
          if (window.FileReader) {
            var reader = new FileReader();
            reader.onload = function (e) {
              document.getElementById(imgPreviewId).setAttribute("src", e.target.result);
            }
            reader.readAsDataURL(fileObj.files[0]);
          } else if (browserVersion.indexOf("SAFARI") > -1) {
            alert("不支持Safari6.0以下浏览器的图片预览!");
          }
        } else if (browserVersion.indexOf("MSIE") > -1) {
          if (browserVersion.indexOf("MSIE 6") > -1) {//ie6
            document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
          } else {//ie[7-9]
            fileObj.select();
            if (browserVersion.indexOf("MSIE 9") > -1)
              fileObj.blur(); //不加上document.selection.createRange().text在ie9会拒绝访问
            var newPreview = document.getElementById(divPreviewId + "New");
            if (newPreview == null) {
              newPreview = document.createElement("div");
              newPreview.setAttribute("id", divPreviewId + "New");
              newPreview.style.width = document.getElementById(imgPreviewId).width + "px";
              newPreview.style.height = document.getElementById(imgPreviewId).height + "px";
              newPreview.style.border = "solid 1px #d2e2e2";
            }
            newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')";
            var tempDivPreview = document.getElementById(divPreviewId);
            tempDivPreview.parentNode.insertBefore(newPreview, tempDivPreview);
            tempDivPreview.style.display = "none";
          }
        } else if (browserVersion.indexOf("FIREFOX") > -1) {//firefox
          var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
          if (firefoxVersion < 7) {//firefox7以下版本
            document.getElementById(imgPreviewId).setAttribute("src", fileObj.files[0].getAsDataURL());
          } else {//firefox7.0+          
            document.getElementById(imgPreviewId).setAttribute("src", window.URL.createObjectURL(fileObj.files[0]));
          }
        } else {
          document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
        }
      } else {
        alert("仅支持" + allowExtention + "为后缀名的文件!");
        fileObj.value = ""; //清空选中文件
        if (browserVersion.indexOf("MSIE") > -1) {
          fileObj.select();
          document.selection.clear();
        }
        fileObj.outerHTML = fileObj.outerHTML;
      }
      return fileObj.value;  //返回路径
    }
  </script>
</body>
</html>

以上所述是小编给大家介绍的JS实现图片上传预览功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • 微信小程序实现下滑到底部自动翻页功能

    微信小程序实现下滑到底部自动翻页功能

    这篇文章主要为大家详细介绍了微信小程序实现下滑到底部自动翻页功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-03-03
  • JavaScript中闭包的4个有用技巧分享

    JavaScript中闭包的4个有用技巧分享

    当谈到JavaScript编程中的高级概念和技巧时,闭包（Closures）是一个重要而有趣的主题,闭包是一种函数与其创建时的词法环境的组合,它允许我们捕获和保留局部变量,并在函数之外使用它们,在这篇文章中,我们将深入探讨JavaScript中闭包的4种有用技巧
    2023-10-10
  • thinkjs之页面跳转同步异步操作

    thinkjs之页面跳转同步异步操作

    这篇文章主要介绍了thinkjs之页面跳转同步异步操作,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2017-02-02
  • JavaScript实现留言板案例

    JavaScript实现留言板案例

    这篇文章主要为大家详细介绍了JavaScript实现留言板案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-03-03
  • 原生JS实现N级菜单的代码

    原生JS实现N级菜单的代码

    最近有项目要实现N级菜单，首先从布局入手，即判断是否有下级菜单，具体实现代码，大家可以参考下本文
    2017-05-05
  • JavaScript实现移动端滑动选择日期功能

    JavaScript实现移动端滑动选择日期功能

    这篇文章主要介绍了JavaScript实现滑动选择日期功能，基于sui-mobile的移动端实现，感兴趣的小伙伴们可以参考一下
    2016-06-06
  • 编写js扩展方法判断一个数组中是否包含某个元素

    编写js扩展方法判断一个数组中是否包含某个元素

    判断集合是否包含某个元素我们可以利用js的原型扩展来封装一个我们自己的Contains方法，具体思路及实现如下，感兴趣的朋友可以参考下
    2013-11-11
  • 使用Javascript监控前端相关数据的代码

    使用Javascript监控前端相关数据的代码

    本篇文章详细的介绍了使用Javascript监控前端相关数据，可以及时的监控前端的错误，加载时间等，有需要的可以了解一下。
    2016-10-10
  • 关于js函数解释(包括内嵌,对象等)

    关于js函数解释(包括内嵌,对象等)

    下面小编就为大家带来一篇关于js函数解释(包括内嵌,对象等) 。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • JS实现导出Excel和CSV文件操作

    JS实现导出Excel和CSV文件操作

    这篇文章介绍了JS实现导出Excel和CSV文件的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-05-05

最新评论