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);





有用  |  无用 取消

猜你喜欢