jQuery插件imgPreviewQs实现上传图片预览


Posted in Javascript onJanuary 15, 2016

上传图片预览,支持IE6、IE7、IE8、IE9、IE10、IE11。 火狐、Chrome 具体没有测试,但是高版本都支持。

imgPreviewQs.js

/*!
  依赖 jQuery 1.5.2 
  (c) 2016 
  license: http://www.opensource.org/licenses/mit-license.php
*/
(function($){
$.fn.imgPreviewQs = function(options){
  function isIE(ver){
    var b = document.createElement('b')
    b.innerHTML = '<!--[if IE ' + ver + ']><i></i><![endif]-->'
    return b.getElementsByTagName('i').length === 1;
  }
   
  options = $.extend( {}, $.fn.imgPreviewQs.defaults,options);
  var $this =$(this);
  $this.change(function(){
    var regex=/(.*)\.(jpg|jpeg|gif|bmp|png)$/;
    var val = $this.val();
    if(!regex.test(val)){
      alert("请选择图片");
      return false;
    }
    if(browserQs.isIE(8)){
      HanderIE789($this);
    }
    else if(window.FileReader){
      HanderFileReader($this);
    }
    else if(browserQs.isIE(9)){
      HanderIE789($this);
    }
    else if(browserQs.isIE(6)){
      HanderOther($this);
    }
    else if(browserQs.isIE(7)){
      HanderIE789($this);
    }
    else{
      $("#"+options.destID).html("浏览器不支持预览图片");
    }
  });
   
  function HanderFileReader($this){
    var oPreviewImg = null, oFReader = new window.FileReader(),
    rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
    oFReader.onload = function (oFREvent) 
    {
      $("#"+options.destID).html("<img src='"+oFREvent.target.result+"' style='width:100%;height:100%;'/>");
    };
     
    var aFiles = $this.get(0).files;
    if (aFiles.length === 0) { return; }
    if (!rFilter.test(aFiles[0].type)) { alert("请选择图片"); return; }
    oFReader.readAsDataURL(aFiles[0]);
  }
   
  function HanderIE789($this){
    $("#"+options.destID).css("filter","progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src='"+getUrl($this)+"')");
  }
   
  function HanderOther($this){
    $("#"+options.destID).html("<img src='"+$this.val()+"' style='width:100%;height:100%;'/>");
  }
   
  function getUrl($this){
    $this.select();
    $this.blur();
    var imgSrc =document.selection.createRange().text;
    document.selection.empty();
    return imgSrc;
  }
}; 
$.fn.imgPreviewQs.defaults = {
    destID:""
};
})(jQuery);
Javascript 相关文章推荐
javascript hashtable 修正版 下载
Dec 30 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
Mar 05 Javascript
深入理解Javascript动态方法调用与参数修改的问题
Dec 10 Javascript
javascript解析json数据的3种方式
May 08 Javascript
每天一篇javascript学习小结(String对象)
Nov 18 Javascript
Javascript如何判断数据类型和数组类型
Jun 22 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
Feb 25 Javascript
JavaScript操作文件_动力节点Java学院整理
Jun 30 Javascript
Angular使用操作事件指令ng-click传多个参数示例
Mar 27 Javascript
Vue.js单向绑定和双向绑定实例分析
Aug 14 Javascript
JS数组求和的常用方法实例小结
Jan 07 Javascript
谈谈JavaScript中的函数
Sep 08 Javascript
实例详解AngularJS实现无限级联动菜单
Jan 15 #Javascript
利用CSS3在Angular中实现动画
Jan 15 #Javascript
JavaScript程序开发之JS代码放置的位置
Jan 15 #Javascript
探讨JavaScript标签位置的存放与功能有无关系
Jan 15 #Javascript
JavaScript知识点总结之如何提高性能
Jan 15 #Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
Jan 15 #Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
Jan 15 #Javascript
You might like
人尽可用的Windows技巧小贴士之下篇
2007/03/22 PHP
详解php语言最牛掰的Laravel框架
2017/11/20 PHP
javascript Excel操作知识点
2009/04/24 Javascript
java与javascript之间json格式数据互转介绍
2013/10/29 Javascript
JavaScript作用域链示例分享
2014/05/27 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
2014/12/16 Javascript
DOM基础教程之事件对象
2015/01/20 Javascript
javascript文本模板用法实例
2015/07/31 Javascript
javascript的正则匹配方法学习
2016/02/24 Javascript
关于JavaScript数组你所不知道的3件事
2016/08/24 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
2016/11/03 Javascript
Vue.js第三天学习笔记(计算属性computed)
2016/12/01 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
2017/02/20 Javascript
深入理解vue.js中的v-if和v-show
2017/06/22 Javascript
vue引入swiper插件的使用实例
2017/07/19 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
2018/09/18 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
2019/10/10 jQuery
Python中使用语句导入模块或包的机制研究
2015/03/30 Python
最基础的Python的socket编程入门教程
2015/04/23 Python
在Python的Django框架中显示对象子集的方法
2015/07/21 Python
手把手教你用python抢票回家过年(代码简单)
2018/01/21 Python
Python操作Sql Server 2008数据库的方法详解
2018/05/17 Python
python实现对csv文件的列的内容读取
2018/07/04 Python
python 多线程重启方法
2019/02/18 Python
代码实例讲解python3的编码问题
2019/07/08 Python
jupyter notebook实现显示行号
2020/04/13 Python
世界上最悠久的自行车制造商:Ribble Cycles
2017/03/18 全球购物
美国顶级防滑鞋:Shoes For Crews
2017/03/27 全球购物
意大利在线大学图书馆:Libreria universitaria
2019/07/16 全球购物
环境工程毕业生自荐信
2013/11/17 职场文书
升职自荐书范文
2013/11/28 职场文书
高二政治教学反思
2014/02/01 职场文书
校园文化标语
2014/06/18 职场文书
仅用一句SQL更新整张表的涨跌幅、涨跌率的解决方案
2021/05/06 MySQL
python+opencv实现目标跟踪过程
2022/06/21 Python