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 ui 1.7更新小结
Aug 15 Javascript
jquery1.4.2 for Visual studio 2010 模板文件
Jul 14 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
Jul 27 Javascript
AngularJS入门教程之路由与多视图详解
Aug 19 Javascript
javascript 中的console.log和弹出窗口alert
Aug 30 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
Nov 01 Javascript
基于JQuery及AJAX实现名人名言随机生成器
Feb 10 Javascript
ES6新特性之变量和字符串用法示例
Apr 01 Javascript
浅谈JS中的反柯里化( uncurrying)
Aug 17 Javascript
vue 不使用select实现下拉框功能(推荐)
May 17 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
Jun 25 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
Jul 17 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
经典的星际争霸,满是回忆的BGM
2020/04/09 星际争霸
thinkPHP学习笔记之安装配置篇
2015/03/05 PHP
浅谈PHP中output_buffering
2015/07/13 PHP
thinkPHP框架实现图像裁剪、缩放、加水印的方法
2017/03/14 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
laravel 查询数据库获取结果实现判断是否为空
2019/10/24 PHP
防止页面被iframe(兼容IE,Firefox火狐)
2010/07/04 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
2013/01/04 Javascript
在NodeJS中启用ECMAScript 6小结(windos以及Linux)
2014/07/15 NodeJs
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
2015/06/04 Javascript
ECMAScript6中Set/WeakSet详解
2015/06/12 Javascript
js实现的万能flv网页播放器代码
2016/04/30 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
2016/10/16 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
2016/12/12 Javascript
vue-router单页面路由
2017/06/17 Javascript
详解用JS添加和删除class类名
2019/03/25 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
vue中keep-alive、activated的探讨和使用详解
2020/07/26 Javascript
Python使用cx_Oracle模块将oracle中数据导出到csv文件的方法
2015/05/16 Python
python如何通过protobuf实现rpc
2016/03/06 Python
Django 多环境配置详解
2019/05/14 Python
Python 获取指定文件夹下的目录和文件的实现
2019/08/30 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
Python Selenium操作Cookie的实例方法
2021/02/28 Python
HTML5中图片之间的缝隙完美解决方法
2017/07/07 HTML / CSS
美国在线健康和美容市场:Pharmapacks
2018/12/05 全球购物
Crocs欧洲官网:Crocs Europe
2020/01/14 全球购物
自荐信结尾
2013/10/27 职场文书
销售总监工作职责
2013/11/21 职场文书
英语专业毕业生自荐信范文
2013/12/31 职场文书
高中综合实践活动总结
2014/07/07 职场文书
煤矿安全知识竞赛活动总结
2014/07/07 职场文书
五好家庭申报材料
2014/12/20 职场文书
这样写python注释让代码更加的优雅
2021/06/02 Python
python简单验证码识别的实现过程
2021/06/20 Python