JS实现图片上传预览功能


Posted in Javascript onNovember 21, 2016

废话不多说了,直接给大家贴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实现图片上传预览功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js如何判断不同系统的浏览器类型
Oct 28 Javascript
Jquery中Event对象属性小结
Feb 27 Javascript
javascript自定义滚动条实现代码
Apr 20 Javascript
简述Matlab中size()函数的用法
Mar 20 Javascript
js实现百度搜索提示框
Feb 05 Javascript
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
详解html-webpack-plugin用法全解
Jan 22 Javascript
vue框架搭建之axios使用教程
Jul 11 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
May 03 Javascript
js实现AI五子棋人机大战
May 28 Javascript
js生成1到100的随机数最简单的实现方法
Feb 07 Javascript
vue使用element-ui实现表单验证
Dec 13 Vue.js
值得分享的JavaScript实现图片轮播组件
Nov 21 #Javascript
使用Ajax生成的Excel文件并下载的实例
Nov 21 #Javascript
javascript入门之数组[新手必看]
Nov 21 #Javascript
jQuery UI插件实现百度提词器效果
Nov 21 #Javascript
javascript中Number的方法小结
Nov 21 #Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
Nov 21 #Javascript
js实现HashTable(哈希表)的实例分析
Nov 21 #Javascript
You might like
php 在文件指定行插入数据的代码
2010/05/08 PHP
PHP中error_log()函数的使用方法
2015/01/20 PHP
smarty内置函数capture用法分析
2015/01/22 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
面向对象设计模式的核心法则
2013/11/10 Javascript
js完美的div拖拽实例代码
2014/01/22 Javascript
js实现鼠标悬浮给图片加边框的方法
2015/01/30 Javascript
JavaScript数据结构与算法之栈与队列
2016/01/29 Javascript
javascript瀑布流布局实现方法详解
2016/02/17 Javascript
JavaScript生成.xls文件的代码
2016/12/22 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
2018/06/15 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
Vue切换Tab动态渲染组件的操作
2020/09/21 Javascript
[02:11]2016国际邀请赛中国区预选赛全程回顾
2016/07/01 DOTA
python中getattr函数使用方法 getattr实现工厂模式
2014/01/20 Python
Python下线程之间的共享和释放示例
2015/05/04 Python
Python2与python3中 for 循环语句基础与实例分析
2017/11/20 Python
Python内建模块struct实例详解
2018/02/02 Python
Python读取txt内容写入xls格式excel中的方法
2018/10/11 Python
python使用Plotly绘图工具绘制水平条形图
2020/03/25 Python
python读取配置文件方式(ini、yaml、xml)
2020/04/09 Python
keras处理欠拟合和过拟合的实例讲解
2020/05/25 Python
Python sublime安装及配置过程详解
2020/06/29 Python
Pycharm 2020.1 版配置优化的详细教程
2020/08/07 Python
windows下python 3.9 Numpy scipy和matlabplot的安装教程详解
2020/11/28 Python
html5与css3小应用
2013/04/03 HTML / CSS
美国椅子和沙发制造商:La-Z-Boy
2020/10/25 全球购物
上班上网检讨书
2014/01/29 职场文书
党员创先争优承诺书
2014/03/26 职场文书
安全生产一岗双责责任书
2014/07/28 职场文书
教师见习报告范文
2014/11/03 职场文书
齐云山导游词
2015/02/06 职场文书
个人工作能力自我评价
2015/03/05 职场文书
springboot用户数据修改的详细实现
2022/04/06 Java/Android
Linux下使用C语言代码搭建一个简单的HTTP服务器
2022/04/13 Servers