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 style 中visibility和display之间的区别
Jan 22 Javascript
JavaScript中setInterval的用法总结
Nov 20 Javascript
jquery实现页面关键词高亮显示的方法
Mar 12 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
Nov 25 Javascript
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
Jun 16 Javascript
AngularJS select设置默认值的实现方法
Aug 25 Javascript
理解 JavaScript EventEmitter
Mar 29 Javascript
Vue页面骨架屏的实现方法
May 22 Javascript
Canvas实现微信红包照片效果
Aug 21 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
Apr 29 Javascript
微信小程序商品详情页底部弹出框
Nov 22 Javascript
vue页面引入three.js实现3d动画场景操作
Aug 10 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
PHP 类型转换函数intval
2009/06/20 PHP
最新的php 文件上传模型,支持多文件上传
2009/08/13 PHP
PHP utf-8编码问题,utf8编码,数据库乱码,页面显示输出乱码
2013/04/08 PHP
PHP设计模式之工厂模式详解
2017/10/24 PHP
用IE重起计算机或者关机的示例代码
2014/03/10 Javascript
使表格的标题列可左右拉伸jquery插件封装
2014/11/24 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
基于jQuery实现表格内容的筛选功能
2016/08/21 Javascript
JavaScript实现反转字符串的方法详解
2017/04/27 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
2017/06/22 jQuery
jQuery回调方法使用示例
2017/06/26 jQuery
完美解决手机网页中输入框被输入法遮挡的问题
2017/12/19 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
2019/06/22 Javascript
webpack+vue.js构建前端工程化的详细教程
2020/05/10 Javascript
jquery更改元素属性attr()方法操作示例
2020/05/22 jQuery
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
python解析xml文件操作实例
2014/10/05 Python
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
Python实现随机生成有效手机号码及身份证功能示例
2017/06/05 Python
Python实现自动为照片添加日期并分类的方法
2017/09/30 Python
python实现微信自动回复功能
2018/04/11 Python
python爬虫之验证码篇3-滑动验证码识别技术
2019/04/11 Python
python网络编程 使用UDP、TCP协议收发信息详解
2019/08/29 Python
pytorch 准备、训练和测试自己的图片数据的方法
2020/01/10 Python
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
python 安装impala包步骤
2020/03/28 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
HTML5仿微信聊天界面、微信朋友圈实例代码
2018/01/29 HTML / CSS
Sneaker Studio捷克:购买运动鞋
2018/07/08 全球购物
宣传保护环境的公益广告词
2014/03/13 职场文书
乡镇干部个人对照检查材料思想汇报
2014/10/04 职场文书
申报优秀教师材料
2014/12/16 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
违纪开除通知书
2015/04/25 职场文书
小学六一儿童节活动总结
2015/05/05 职场文书
redis lua限流算法实现示例
2022/07/15 Redis