jQuery插件imgPreviewQs实现上传图片预览
上传图片预览，支持IE6、IE7、IE8、IE9、IE10、IE11。火狐、Chrome具体没有测试，但是高版本都支持。
imgPreviewQs.js
/*!
依赖jQuery1.5.2
(c)2016
license:http://www.opensource.org/licenses/mit-license.php
*/
(function($){
$.fn.imgPreviewQs=function(options){
functionisIE(ver){
varb=document.createElement('b')
b.innerHTML='<!--[ifIE'+ver+']><i></i><![endif]-->'
returnb.getElementsByTagName('i').length===1;
}
options=$.extend({},$.fn.imgPreviewQs.defaults,options);
var$this=$(this);
$this.change(function(){
varregex=/(.*)\.(jpg|jpeg|gif|bmp|png)$/;
varval=$this.val();
if(!regex.test(val)){
alert("请选择图片");
returnfalse;
}
if(browserQs.isIE(8)){
HanderIE789($this);
}
elseif(window.FileReader){
HanderFileReader($this);
}
elseif(browserQs.isIE(9)){
HanderIE789($this);
}
elseif(browserQs.isIE(6)){
HanderOther($this);
}
elseif(browserQs.isIE(7)){
HanderIE789($this);
}
else{
$("#"+options.destID).html("浏览器不支持预览图片");
}
});
functionHanderFileReader($this){
varoPreviewImg=null,oFReader=newwindow.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("<imgsrc='"+oFREvent.target.result+"'style='width:100%;height:100%;'/>");
};
varaFiles=$this.get(0).files;
if(aFiles.length===0){return;}
if(!rFilter.test(aFiles[0].type)){alert("请选择图片");return;}
oFReader.readAsDataURL(aFiles[0]);
}
functionHanderIE789($this){
$("#"+options.destID).css("filter","progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src='"+getUrl($this)+"')");
}
functionHanderOther($this){
$("#"+options.destID).html("<imgsrc='"+$this.val()+"'style='width:100%;height:100%;'/>");
}
functiongetUrl($this){
$this.select();
$this.blur();
varimgSrc=document.selection.createRange().text;
document.selection.empty();
returnimgSrc;
}
};
$.fn.imgPreviewQs.defaults={
destID:""
};
})(jQuery);