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 相关文章推荐
javascript 实现 原路返回
Jan 21 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
Jun 12 Javascript
jQuery Select下拉框操作小结(推荐)
Jul 22 Javascript
vue.js表格分页示例
Oct 18 Javascript
vue 里面使用axios 和封装的示例代码
Sep 01 Javascript
Vue-router 切换组件页面时进入进出动画方法
Sep 01 Javascript
JavaScript继承的特性与实践应用深入详解
Dec 30 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
Jun 22 Javascript
微信小程序 数据缓存实现方法详解
Aug 26 Javascript
vue+element导航栏高亮显示的解决方式
Nov 12 Javascript
Vue实现浏览器打印功能的代码
Apr 17 Javascript
vue.js实现h5机器人聊天(测试版)
Jul 16 Javascript
值得分享的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
WinXP + Apache +PHP5 + MySQL + phpMyAdmin安装全功略
2006/07/09 PHP
计算2000年01月01日起到指定日的天数
2006/10/09 PHP
php面向对象全攻略 (十六) 对象的串行化
2009/09/30 PHP
php中通过curl smtp发送邮件
2012/06/05 PHP
php代码书写习惯优化小结
2013/06/20 PHP
php使用strtotime和date函数判断日期是否有效代码分享
2013/12/25 PHP
一组PHP可逆加密解密算法实例代码
2014/01/21 PHP
再推荐十款免费的php开发工具
2015/11/09 PHP
PHP5.0~5.6 各版本兼容性cURL文件上传功能实例分析
2018/05/11 PHP
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
jquery中通过父级查找进行定位示例
2013/06/28 Javascript
jQuery中:hidden选择器用法实例
2014/12/30 Javascript
javascript实现时间格式输出FormatDate函数
2015/01/13 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
2016/12/14 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
2017/08/23 Javascript
最基础的vue.js双向绑定操作
2017/08/23 Javascript
微信小程序使用swiper组件实现层叠轮播图
2018/11/04 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
2020/01/07 Javascript
Vue自定义组件双向绑定实现原理及方法详解
2020/09/03 Javascript
design vue 表格开启列排序的操作
2020/10/28 Javascript
[01:02:53]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第二局
2016/03/06 DOTA
Python 元组(Tuple)操作详解
2014/03/11 Python
python3 实现口罩抽签的功能
2020/03/11 Python
详解CSS3选择器:nth-child和:nth-of-type之间的差异
2017/09/18 HTML / CSS
简单介绍HTML5中audio标签的使用
2015/09/24 HTML / CSS
天巡全球:Skyscanner Global
2017/06/20 全球购物
俄罗斯在线购买飞机票、火车票、巴士票网站:Tutu.ru
2020/03/16 全球购物
德国W家官网,可直邮中国的母婴商城:Windeln.de
2021/03/03 全球购物
武汉东之林科技有限公司机试
2013/09/17 面试题
shell程序中如何注释
2012/01/28 面试题
学生检讨书怎么写?
2014/10/10 职场文书
中小企业员工手册范本
2015/05/14 职场文书
创业计划书之孕婴生活馆
2019/11/11 职场文书
python pygame入门教程
2021/06/01 Python
Python可视化神器pyecharts之绘制地理图表练习
2022/07/07 Python