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 相关文章推荐
Javascript变量作用域详解
Dec 06 Javascript
使用js实现数据格式化
Dec 03 Javascript
浅谈javascript对象模型和function对象
Dec 26 Javascript
javascript 获取浏览器版本
Jan 21 Javascript
Javascript基础回顾之(一) 类型
Jan 31 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
详解vue-cli 脚手架项目-package.json
Jul 04 Javascript
详解vue-cli 接口代理配置
Dec 13 Javascript
详解Vue快速零配置的打包工具——parcel
Jan 16 Javascript
微信小程序画布圆形进度条显示效果
Nov 17 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
Jan 20 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
May 19 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
php 网上商城促销设计实例代码
2012/02/17 PHP
php连接函数implode与分割explode的深入解析
2013/06/26 PHP
Drupal7中常用的数据库操作实例
2014/03/02 PHP
表单提交时自动复制内容到剪贴板的js代码
2007/03/16 Javascript
可实现多表单提交的javascript函数
2007/08/01 Javascript
js中top的作用深入剖析
2014/03/04 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
2014/05/08 Javascript
Bootstrap每天必学之级联下拉菜单
2016/03/27 Javascript
ashx文件获取$.ajax()方法发送的数据
2016/05/26 Javascript
关于Jquery中的事件绑定总结
2016/10/26 Javascript
bootstrap PrintThis打印插件使用详解
2017/02/20 Javascript
JS简单获取日期相差天数的方法
2017/04/24 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
2017/12/29 Javascript
微信、QQ、微博、Safari中使用js唤起App
2018/01/24 Javascript
JavaScript函数apply()和call()用法与异同分析
2018/08/10 Javascript
原生js实现trigger方法示例代码
2019/05/22 Javascript
python实现问号表达式(?)的方法
2013/11/27 Python
python如何实现远程控制电脑(结合微信)
2015/12/21 Python
python3之微信文章爬虫实例讲解
2017/07/12 Python
VScode编写第一个Python程序HelloWorld步骤
2018/04/06 Python
python 移除字符串尾部的数字方法
2018/07/17 Python
django框架实现模板中获取request 的各种信息示例
2019/07/01 Python
详解pandas中MultiIndex和对象实际索引不一致问题
2019/07/23 Python
解决Jupyter notebook更换主题工具栏被隐藏及添加目录生成插件问题
2020/04/20 Python
python 如何上传包到pypi
2020/12/24 Python
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
2014/02/10 HTML / CSS
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
Traffic People官网:女式花裙、上衣和连身裤
2020/10/12 全球购物
小学敬老月活动方案
2014/02/11 职场文书
个人委托书范本汇总
2014/10/01 职场文书
2015年宣传部个人工作总结
2015/05/14 职场文书
2016年元旦致辞
2015/08/01 职场文书
CSS3 制作的悬停缩放特效
2021/04/13 HTML / CSS
vue实现可拖拽的dialog弹框
2021/05/13 Vue.js
分析SQL窗口函数之取值窗口函数
2022/04/21 Oracle
win11开机发生死循环重启怎么办?win11开机发生死循环重启解决方法
2022/08/05 数码科技