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插入节点appendChild insertBefore使用方法
Jul 04 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
Feb 27 Javascript
通过正则表达式实现表单验证是否为中文
Feb 18 Javascript
js 调用百度地图api并在地图上进行打点添加标注
May 13 Javascript
JavaScript取得键盘按下方向键是哪个的方法
Aug 04 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
Mar 07 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
Aug 16 Javascript
Angularjs实现mvvm式的选项卡示例代码
Sep 08 Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 Javascript
vue.extend实现alert模态框弹窗组件
Apr 28 Javascript
JS实现动态生成html table表格的方法分析
Jul 11 Javascript
教你部署vue项目到docker
Apr 05 Vue.js
实例详解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生成静态页面详解
2006/11/19 PHP
PHP图片上传类带图片显示
2006/11/25 PHP
获取远程文件大小的php函数
2010/01/11 PHP
Laravel5中contracts详解
2015/03/02 PHP
ThinkPHP3.2.3框架邮件发送功能图文实例详解
2019/04/23 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
JScript 脚本实现文件下载 一般用于下载木马
2009/10/29 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
JavaScript DOM节点添加示例
2014/07/16 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
浅析jQuery Ajax通用js封装
2016/06/22 Javascript
javascript实现下雨效果
2017/03/27 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
2017/06/29 Javascript
nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
2017/07/05 NodeJs
详解Vue单元测试case写法
2018/05/24 Javascript
详解Vue SPA项目优化小记
2018/07/03 Javascript
Element输入框带历史查询记录的实现示例
2019/01/15 Javascript
基于layui table返回的值的多级嵌套的解决方法
2019/09/19 Javascript
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
Python内置数据类型list各方法的性能测试过程解析
2020/01/07 Python
Python list运算操作代码实例解析
2020/01/20 Python
python高阶函数map()和reduce()实例解析
2020/03/16 Python
Python库skimage绘制二值图像代码实例
2020/04/10 Python
用pandas划分数据集实现训练集和测试集
2020/07/20 Python
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
2020/05/14 HTML / CSS
Sneaker Studio法国:购买运动鞋
2018/06/08 全球购物
优秀的毕业生的自我评价
2013/12/12 职场文书
高三地理教学反思
2014/01/11 职场文书
体育教育毕业生自荐信
2014/06/29 职场文书
王金山在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
乡镇2014法制宣传日活动总结
2014/11/01 职场文书
企业2014年度工作总结
2014/12/10 职场文书
婚庆主持词大全
2015/06/30 职场文书
导游词之苏州阳澄湖
2019/11/15 职场文书
CSS 实现磨砂玻璃(毛玻璃)效果样式
2023/05/21 HTML / CSS