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 相关文章推荐
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
Dec 27 Javascript
基于jQuery的自动完成插件
Feb 03 Javascript
jquery.tmpl JQuery模板插件
Oct 10 Javascript
jquery插件开发方法(初学者)
Feb 03 Javascript
JS增加行复制行删除行的实现代码
Nov 09 Javascript
JavaScript的面向对象编程基础
Aug 13 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
Jul 24 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
Feb 07 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
Jun 28 Javascript
微信小程序实现图片上传
May 23 Javascript
微信小程序mpvue点击按钮获取button值的方法
May 29 Javascript
vue项目中使用多选框的实例代码
Jul 22 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
全国FM电台频率大全 - 11 浙江省
2020/03/11 无线电
模板引擎正则表达式调试小技巧
2011/07/20 PHP
PHP禁止页面缓存的代码
2011/10/23 PHP
php+mysqli数据库连接的两种方式
2015/01/28 PHP
PHP简单验证码功能机制实例详解
2019/03/27 PHP
Js动态创建div
2008/09/25 Javascript
js中巧用cssText属性批量操作样式
2011/03/13 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
2013/01/16 Javascript
js 获取和设置css3 属性值的实现方法
2013/05/06 Javascript
jquery prop的使用介绍及与attr的区别
2013/12/19 Javascript
JavaScript动态添加列的方法
2015/03/25 Javascript
jQuery团购倒计时特效实现方法
2015/05/07 Javascript
js实现点击切换TAB标签实例
2015/08/21 Javascript
jQuery实现ajax无刷新分页页码控件
2017/02/28 Javascript
使用JavaScript实现链表的数据结构的代码
2017/08/02 Javascript
微信小程序实现下拉刷新和轮播图效果
2017/11/21 Javascript
解决Layui 表单提交数据为空的问题
2018/08/15 Javascript
微信小程序实现留言功能
2018/10/31 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
2020/08/03 Javascript
[16:04]DOTA2海涛带你玩炸弹 9月5日更新内容详解
2014/09/05 DOTA
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
讲解Python3中NumPy数组寻找特定元素下标的两种方法
2019/08/04 Python
Python常用编译器原理及特点解析
2020/03/23 Python
python实现逻辑回归的示例
2020/10/09 Python
努比亚手机官网:nubia
2016/10/06 全球购物
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
亚洲最大的眼镜批发商和零售商之一:Glasseslit
2018/10/08 全球购物
应聘教师推荐信
2013/10/31 职场文书
药店采购员岗位职责
2014/09/30 职场文书
党的群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
小学见习报告
2014/10/31 职场文书
幼儿园教师读书笔记
2015/06/29 职场文书
php访问对象中的成员的实例方法
2021/11/17 PHP
Python+DeOldify实现老照片上色功能
2022/06/21 Python
ORACLE中dbms_output.put_line输出问题的解决过程
2022/06/28 Oracle