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一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
Aug 28 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
May 31 Javascript
jquery重新播放css动画所遇问题解决
Aug 21 Javascript
JavaScript获取路径设计源码
May 22 Javascript
IE6 hack for js 集锦
Sep 23 Javascript
浅析javascript中的DOM
Mar 01 Javascript
javascript限制文本框输入值类型的方法
May 07 Javascript
原生的强大DOM选择器querySelector介绍
Dec 21 Javascript
第一个Vue插件从封装到发布
Nov 22 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
Nov 15 Javascript
vue-for循环嵌套操作示例
Jan 28 Javascript
JavaScript中while循环的基础使用教程
Aug 11 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
一个改进的UBB类
2006/10/09 PHP
header中Content-Disposition的作用与使用方法
2012/06/13 PHP
根据中文裁减字符串函数的php代码
2013/12/03 PHP
php实现将上传word文件转为html的方法
2015/06/03 PHP
php基于curl实现随机ip地址抓取内容的方法
2016/10/11 PHP
Laravel框架模板加载,分配变量及简单路由功能示例
2018/06/11 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
浅析document.ready和window.onload的区别讲解
2013/12/18 Javascript
jQuery的缓存机制浅析
2014/06/07 Javascript
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
jQuery+Ajax实现无刷新操作
2016/01/04 Javascript
jQuery简单实现遍历单选框的方法
2017/03/06 Javascript
javascript实现的图片预览功能
2017/03/25 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
2017/03/28 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
2018/01/31 jQuery
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
2018/03/13 Javascript
JQuery扩展对象方法操作示例
2018/08/21 jQuery
Bootbox将后台JSON数据填充Form表单的实例代码
2018/09/10 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
从表单校验看JavaScript策略模式的使用详解
2020/10/17 Javascript
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
JavaScript如何实现防止重复的网络请求的示例
2021/01/28 Javascript
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
给Python初学者的一些编程技巧
2015/04/03 Python
Python的Django框架使用入门指引
2015/04/15 Python
Python从list类型、range()序列简单认识类(class)【可迭代】
2019/05/31 Python
python调用matplotlib模块绘制柱状图
2019/10/18 Python
基于Python获取docx/doc文件内容代码解析
2020/02/17 Python
在jupyter notebook中调用.ipynb文件方式
2020/04/14 Python
英国领先的互联网葡萄酒礼品商:Vintage Wine & Port
2019/05/24 全球购物
军训生自我鉴定范文
2013/12/27 职场文书
迁户口计划生育证明
2014/10/19 职场文书
再婚婚前财产协议书范本
2014/10/19 职场文书
公务员年度考核评语
2014/12/31 职场文书
创业计划书之酒厂
2019/10/14 职场文书
python中的class_static的@classmethod的巧妙用法
2021/06/22 Python