JS实现上传图片实时预览功能


Posted in Javascript onMay 22, 2017

前段时间在网络上找的代码,修改了一部分用在了项目里。原博客地址找不到了,如果原作者看到的话留言我,将于第一时间删除。

//js本地图片预览,兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3
  function PreviewImage(fileObj) {
    //创建dom元素
    var divPreviewId = 'divPreview_' + fileObj.name;
    var imgPreviewId = 'imgHeadPhoto_' + fileObj.name;
    var html='<div id="'+divPreviewId+'">'+
          '<img id="'+imgPreviewId+'" src="images/moren.jpg" style="width: 120px; height: 120px; border: solid 1px #d2e2e2;" />'+
         '</div>';
    $('#'+divPreviewId).remove();
    $(fileObj).after(html);
    //进行限制
    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) {
          $('#'+divPreviewId).remove();
          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 {
      $('#'+divPreviewId).remove();
      alert("仅支持" + allowExtention + "为后缀名的文件!");
      fileObj.value = ""; //清空选中文件
      if (browserVersion.indexOf("MSIE") > -1) {
        fileObj.select();
        document.selection.clear();
      }
      fileObj.outerHTML = fileObj.outerHTML;
    }
    return fileObj.value;  //返回路径
  }

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

Javascript 相关文章推荐
url 编码 js url传参中文乱码解决方案
Apr 11 Javascript
高亮显示web页表格行的javascript代码
Nov 19 Javascript
Javascript中的isNaN函数使用说明
Nov 10 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
Dec 12 Javascript
JavaScript与DOM组合动态创建表格实例
Dec 23 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
Aug 28 Javascript
jQuery实现联动下拉列表查询框
Jan 04 Javascript
Vue中的vue-resource示例详解
Nov 02 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
Dec 16 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
Jun 03 Javascript
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
Vue获取微博授权URL代码实例
Nov 04 Javascript
详解Angular 4.x NgIf 的用法
May 22 #Javascript
JS实现无缝循环marquee滚动效果
May 22 #Javascript
jQuery表单验证之密码确认
May 22 #jQuery
JavaScript实现QQ聊天消息展示和评论提交功能
May 22 #Javascript
单行 JS 实现移动端金钱格式的输入规则
May 22 #Javascript
JavaScript表单验证实现代码
May 22 #Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 #jQuery
You might like
在命令行下运行PHP脚本[带参数]的方法
2010/01/22 PHP
php中获取指定IP的物理地址的代码(正则表达式)
2011/06/23 PHP
php中FTP函数ftp_connect、ftp_login与ftp_chmod用法
2014/11/18 PHP
PHP基于phpqrcode生成带LOGO图像的二维码实例
2015/07/10 PHP
微信随机生成红包金额算法php版
2016/07/21 PHP
php中static和const关键字用法分析
2016/12/07 PHP
PHP排序算法之希尔排序(Shell Sort)实例分析
2018/04/20 PHP
Nigma vs Liquid BO3 第二场2.14
2021/03/10 DOTA
用javascript实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
2007/08/15 Javascript
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
2013/12/17 Javascript
JS实现根据当前文字选择返回被选中的文字
2014/05/21 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
jQuery中filter()方法用法实例
2015/01/06 Javascript
jQuery检测输入的字符串包含的中英文的数量
2015/04/17 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
2016/06/28 Javascript
如何制作幻灯片(代码分享)
2017/01/06 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
使用jQuery实现购物车结算功能
2017/08/15 jQuery
JS实现评价的星星功能
2017/08/20 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
2018/11/14 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
2019/04/24 Javascript
Python GUI布局尺寸适配方法
2018/10/11 Python
用Python读取几十万行文本数据
2018/12/24 Python
django rest framework 实现用户登录认证详解
2019/07/29 Python
python数据类型之间怎么转换技巧分享
2019/08/20 Python
对pytorch的函数中的group参数的作用介绍
2020/02/18 Python
美国一家全面的在线零售鞋类公司:SHOEBACCA
2017/01/06 全球购物
美国台面电器和厨具品牌:KitchenAid
2019/04/12 全球购物
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
住院医师规范化培训实施方案
2014/06/12 职场文书
2015年机关纠风工作总结
2015/05/15 职场文书
幼儿园教师读书笔记
2015/06/29 职场文书
小学语文教学反思范文
2016/03/03 职场文书
ssh服务器拒绝了密码 请再试一次已解决(亲测有效)
2022/08/14 Servers