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 相关文章推荐
轻轻松松学习JavaScript
Feb 25 Javascript
理清apply(),call()的区别和关系
Aug 14 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
Aug 02 Javascript
浅谈JavaScript 框架分类
Nov 10 Javascript
修改或扩展jQuery原生方法的代码实例
Jan 13 Javascript
jQuery on()绑定动态元素出现的问题小结
Feb 19 Javascript
微信小程序-消息提示框实例
Nov 24 Javascript
原生JS实现简单放大镜效果
Feb 08 Javascript
手把手搭建安装基于windows的Vue.js运行环境
Jun 12 Javascript
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
vue webpack打包优化操作技巧
Feb 22 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
Apr 29 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
全国FM电台频率大全 - 1 北京市
2020/03/11 无线电
php写的简易聊天室代码
2011/06/04 PHP
那些年一起学习的PHP(二)
2012/03/21 PHP
基于PHP常用字符串的总结(待续)
2013/06/07 PHP
PHP常见的6个错误提示及解决方法
2016/07/07 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
Jquery获取复选框被选中值的简单方法
2013/07/04 Javascript
js中自定义方法实现停留几秒sleep
2014/07/11 Javascript
JS与jQuery遍历Table所有单元格内容的方法
2015/12/07 Javascript
基于vue2的table分页组件实现方法
2017/03/20 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
2017/11/22 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
2018/03/12 Javascript
react中fetch之cors跨域请求的实现方法
2018/03/14 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
2018/08/20 Javascript
Vue-不允许嵌套式的渲染方法
2018/09/13 Javascript
详解关于element el-button使用$attrs的一个注意要点
2018/11/09 Javascript
详解vue使用插槽分发内容slot的用法
2019/03/28 Javascript
vue.js实现三级菜单效果
2019/10/19 Javascript
详解小程序如何动态绑定点击的执行方法
2019/11/26 Javascript
[44:04]OG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python实现问号表达式(?)的方法
2013/11/27 Python
python实现挑选出来100以内的质数
2015/03/24 Python
python实现用户登陆邮件通知的方法
2015/07/09 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
Python3实现从排序数组中删除重复项算法分析
2019/04/03 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
python3使用print打印带颜色的字符串代码实例
2019/08/22 Python
详解python中eval函数的作用
2019/10/22 Python
Python基于Socket实现简易多人聊天室的示例代码
2020/11/29 Python
《鹬蚌相争》教学反思
2014/04/22 职场文书
中学生操行评语
2014/04/24 职场文书
献爱心捐款倡议书
2014/05/14 职场文书
单方投资意向书
2015/05/11 职场文书
Python学习开发之图形用户界面详解
2021/08/23 Python
MySQL连接控制插件介绍
2021/09/25 MySQL