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的类似新浪微博展示信息效果的代码
Jul 23 Javascript
javaScript 删除字符串空格多种方法小结
Oct 24 Javascript
jQuery语法总结和注意事项小结
Nov 11 Javascript
javascript中SetInterval与setTimeout的定时器用法
Aug 24 Javascript
js实现新年倒计时效果
Dec 10 Javascript
浅谈JS原生Ajax,GET和POST
Jun 08 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
Oct 27 Javascript
mui框架 页面无法滚动的解决方法(推荐)
Jan 25 Javascript
小程序云开发之用户注册登录
May 18 Javascript
layui点击按钮页面会自动刷新的解决方案
Oct 25 Javascript
webpack常用配置总览(小结)
Nov 18 Javascript
Vue-resource安装过程及使用方法解析
Jul 21 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
ECshop 迁移到 PHP7版本时遇到的兼容性问题
2016/02/15 PHP
php微信公众平台配置接口开发程序
2016/09/22 PHP
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
总结PHP中初始化空数组的最佳方法
2019/02/13 PHP
js停止输出代码
2008/07/20 Javascript
一个可以随意添加多个序列的tag函数
2009/07/21 Javascript
JS实现OCX控件的事件响应示例
2014/09/17 Javascript
jQuery实现不断闪烁文字的方法
2015/05/15 Javascript
JavaScript数组去重的3种方法和代码实例
2015/07/01 Javascript
JS动态日期时间的获取方法
2015/09/28 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
2016/01/04 Javascript
Bootstrap每天必学之弹出框(Popover)插件
2016/04/25 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
2016/09/02 Javascript
vue自定义表单生成器form-create使用详解
2019/07/19 Javascript
vue项目或网页上实现文字转换成语音播放功能
2020/06/09 Javascript
[06:16]DOTA2守卫传承者——职业选手谈心路历程
2015/02/26 DOTA
python里对list中的整数求平均并排序
2014/09/12 Python
Python使用回溯法子集树模板解决迷宫问题示例
2017/09/01 Python
Python批处理删除和重命名文件夹的实例
2018/07/11 Python
对Python捕获控制台输出流的方法详解
2019/01/07 Python
Python的numpy库下的几个小函数的用法(小结)
2019/07/12 Python
浅谈Django中view对数据库的调用方法
2019/07/18 Python
把django中admin后台界面的英文修改为中文显示的方法
2019/07/26 Python
使用Python文件读写,自定义分隔符(custom delimiter)
2020/07/05 Python
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
Prototype如何实现页面局部定时刷新
2013/08/06 面试题
电气工程及其自动化自我评价四篇
2013/09/24 职场文书
精细化工应届生求职信
2013/11/17 职场文书
超市店庆活动方案
2014/08/31 职场文书
中小学校园安全广播稿
2014/09/29 职场文书
纪检部部长竞选稿
2015/11/21 职场文书
文案策划岗位个人自我评价(范文)
2019/08/08 职场文书
CSS3 制作精美的定价表
2021/04/06 HTML / CSS
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python
「约定的梦幻岛」作画发布诺曼生日新绘
2022/03/21 日漫