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

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

以上就是本文章的内容，希望对大家有所帮助