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 相关文章推荐
JQuery 入门实例1
Jun 25 Javascript
JavaScript传递变量: 值传递?引用传递?
Feb 22 Javascript
jQuery和AngularJS的区别浅析
Jan 29 Javascript
js获取滚动距离的方法
May 30 Javascript
JS获取随机数和时间转换的简单实例
Jul 10 Javascript
Zabbix添加Node.js监控的方法
Oct 20 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
Apr 01 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
Sep 11 Javascript
浅谈Postman解决token传参的问题
Mar 31 Javascript
layui实现数据表格隐藏列的示例
Oct 25 Javascript
JavaScript工具库MyTools详解
Jan 01 Javascript
JavaScript实现随机点名器
Mar 25 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
一个很方便的 XML 类!!原创的噢
2006/10/09 PHP
谈谈PHP语法(2)
2006/10/09 PHP
基于mysql的bbs设计(二)
2006/10/09 PHP
php后台多用户权限组思路与实现程序代码分享
2012/02/13 PHP
解析Extjs与php数据交互(增删查改)
2013/06/25 PHP
PHP开启opcache提升代码性能
2015/04/26 PHP
php判断对象是派生自哪个类的方法
2015/06/20 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
通过jquery实现tab标签浏览效果
2007/02/20 Javascript
[Web]防止用户复制页面内容和另存页面的方法
2009/02/06 Javascript
javascript new后的constructor属性
2010/08/05 Javascript
单独使用CKFinder选择图片的方法
2010/08/21 Javascript
js判断输入是否为正整数、浮点数等数字的函数代码
2010/11/17 Javascript
JS实现提交表单前的数字及邮箱校检功能
2017/11/13 Javascript
让Vue也可以使用Redux的方法
2018/05/23 Javascript
webpack打包非模块化js的方法
2018/10/24 Javascript
JavaScript内置对象math,global功能与用法实例分析
2019/06/10 Javascript
微信小程序实现手势滑动效果
2019/08/26 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
vue父子组件间引用之$parent、$children
2020/05/20 Javascript
pycharm 使用心得(五)断点调试
2014/06/06 Python
基于Python实现通过微信搜索功能查看谁把你删除了
2016/01/27 Python
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
python3.4实现邮件发送功能
2018/05/28 Python
对Python 语音识别框架详解
2018/12/24 Python
python SQLAlchemy的Mapping与Declarative详解
2019/07/04 Python
Python 给定的经纬度标注在地图上的实现方法
2019/07/05 Python
python3+django2开发一个简单的人员管理系统过程详解
2019/07/23 Python
使用pyecharts1.7进行简单的可视化大全
2020/05/17 Python
中专生自荐信
2013/10/12 职场文书
机电工程学生自荐信范文
2013/12/07 职场文书
骨干教师个人总结
2015/02/11 职场文书
初三化学教学反思
2016/02/22 职场文书
成人成长感言如何写?
2019/08/16 职场文书
redis 限制内存使用大小的实现
2021/05/08 Redis
Spring Cache和EhCache实现缓存管理方式
2021/06/15 Java/Android