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 相关文章推荐
用js实现计算代码行数的简单方法附代码
Aug 13 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
May 16 Javascript
深入剖析JavaScript编程中的对象概念
Oct 21 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
Dec 19 Javascript
纯JS代码实现气泡效果
May 04 Javascript
JS平滑无缝滚动效果的实现代码
May 06 Javascript
JavaScript数据结构链表知识详解
Nov 21 Javascript
javascript实现非常简单的小数取整功能示例
Jun 13 Javascript
浅析vue深复制
Jan 29 Javascript
iview在vue-cli3如何按需加载的方法
Oct 31 Javascript
微信小程序生成分享海报方法(附带二维码生成)
Mar 29 Javascript
如何用JavaScript实现一个数组惰性求值库
May 05 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
生成ubuntu自动切换壁纸xml文件的php代码
2010/07/17 PHP
将时间以距今多久的形式表示,PHP,js双版本
2012/09/25 PHP
PHP读取数据库并按照中文名称进行排序实现代码
2013/01/29 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
通过$(this)使用jQuery包装后的方法或属性
2014/05/18 Javascript
JS实现霓虹灯文字效果的方法
2015/08/06 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
2015/10/17 Javascript
JS基于Mootools实现的个性菜单效果代码
2015/10/21 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
2017/01/23 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
2017/02/20 Javascript
js获取指定时间的前几秒
2017/04/05 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
2017/05/03 Javascript
使用jQuery 操作table 完成单元格合并的实例
2017/12/27 jQuery
详解Angular调试技巧之报错404(not found)
2018/01/31 Javascript
Promise.all中对于reject的处理方法
2018/08/01 Javascript
javascript闭包的使用之按钮切换功能
2018/08/30 Javascript
探索浏览器页面关闭window.close()的使用详解
2020/08/21 Javascript
python实现在字符串中查找子字符串的方法
2015/07/11 Python
python实现八大排序算法(1)
2017/09/14 Python
Python学习之Django的管理界面代码示例
2018/02/10 Python
Django之PopUp的具体实现方法
2019/08/31 Python
Python sqlite3查询操作过程解析
2020/02/20 Python
python删除某个目录文件夹的方法
2020/05/26 Python
使用Python构造hive insert语句说明
2020/06/06 Python
tensorflow 2.0模式下训练的模型转成 tf1.x 版本的pb模型实例
2020/06/22 Python
Python enumerate() 函数如何实现索引功能
2020/06/29 Python
详解在Python中使用Torchmoji将文本转换为表情符号
2020/07/27 Python
有750多个顶级品牌的瑞士时尚在线:ABOUT YOU
2017/01/04 全球购物
水污染治理专业毕业生推荐信
2013/11/14 职场文书
中医专业应届生求职信
2013/11/17 职场文书
2014年教师节寄语
2014/08/11 职场文书
院党委组织查摆问题对照检查材料思想汇报2014
2014/10/08 职场文书
村党的群众路线教育实践活动工作总结
2014/10/25 职场文书
2015年纪委工作总结
2015/05/13 职场文书
什么是检讨书?检讨书的格式及范文
2019/11/05 职场文书
Python卷积神经网络图片分类框架详解分析
2021/11/07 Python