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拓展DOM操作 prependChild insertAfert
Nov 17 Javascript
JS比较两个时间大小的简单示例代码
Dec 20 Javascript
javascript函数重载解决方案分享
Feb 19 Javascript
Javascript MVC框架Backbone.js详解
Sep 18 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
Feb 23 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
Oct 21 Javascript
VUEJS实战之构建基础并渲染出列表(1)
Jun 13 Javascript
Angular2 自定义validators的实现方法
Jul 05 Javascript
Angular实现可删除并计算总金额的购物车功能示例
Dec 26 Javascript
js array数组对象操作方法汇总
Mar 18 Javascript
vue+element tabs选项卡分页效果
Jun 29 Javascript
Javascript实现单选框效果
Dec 09 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
PHP 彩色文字实现代码
2009/06/29 PHP
php在线解压ZIP文件的方法
2014/12/30 PHP
php单链表实现代码分享
2016/07/04 PHP
详解Yii2 rules 的验证规则
2016/12/02 PHP
PHP学习记录之数组函数
2018/06/01 PHP
添加到收藏夹代码(兼容几乎所有的浏览器)
2007/01/09 Javascript
JavaScript高级程序设计 客户端存储学习笔记
2011/09/10 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
2016/03/01 Javascript
js学习之----深入理解闭包
2016/11/21 Javascript
js实现方块上下左右移动效果
2017/08/17 Javascript
Vue全局分页组件的实现代码
2018/08/10 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
2018/11/12 jQuery
有关wxpython pyqt内存占用问题分析
2014/06/09 Python
Python定时执行之Timer用法示例
2015/05/27 Python
python多线程socket编程之多客户端接入
2017/09/12 Python
python实现字符串中字符分类及个数统计
2018/09/28 Python
详解python itertools功能
2020/02/07 Python
使用Pyhton 分析酒店针孔摄像头
2020/03/04 Python
Python要求O(n)复杂度求无序列表中第K的大元素实例
2020/04/02 Python
django rest framework使用django-filter用法
2020/07/15 Python
工厂保洁员岗位职责
2013/12/04 职场文书
银行学习十八大感想
2014/01/11 职场文书
高中毕业自我评价
2014/02/08 职场文书
中国好声音广告词
2014/03/18 职场文书
文秘求职信范文
2014/04/10 职场文书
工作推荐信范文
2014/05/10 职场文书
医院竞聘演讲稿
2014/05/16 职场文书
生日宴会策划方案
2014/06/03 职场文书
2014党员整改措施思想汇报
2014/10/07 职场文书
美术教师个人总结
2015/02/06 职场文书
大学军训通讯稿
2015/07/18 职场文书
应届生们该怎么书写求职信?
2019/07/05 职场文书
你离财务总监还有多远?速览CFO的岗位职责
2019/11/18 职场文书
pytorch中F.avg_pool1d()和F.avg_pool2d()的使用操作
2021/05/22 Python
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS
室外天线与收音机天线杆接合方法
2022/04/05 无线电