首页 > 编程 > JavaScript > 正文

jQuery插件imgPreviewQs实现上传图片预览

2019-11-20 10:47:37
字体:
来源:转载
供稿:网友

上传图片预览,支持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);

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表