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

前端之家收集整理的这篇文章主要介绍了jQuery插件imgPreviewQs实现上传图片预览前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

上传图片预览,支持IE6、IE7、IE8、IE9、IE10、IE11。 火狐、Chrome 具体没有测试,但是高版本都支持

imgPreviewQs.js

PHP */ (function($){ $.fn.imgPreviewQs = function(options){ function isIE(ver){ var b = document.createElement('b') b.innerHTML = '' 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("");
};

var aFiles = $this.get(0).files;
if (aFiles.length === 0) { return; }
if (!rFilter.test(aFiles[0].type)) { alert("请选择<a href="/tag/tupian/" target="_blank" class="keywords">图片</a>"); 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("");
}

function getUrl($this){
$this.select();
$this.blur();
var imgSrc =document.selection.createRange().text;
document.selection.empty();
return imgSrc;
}
};
$.fn.imgPreviewQs.defaults = {
destID:""
};
})(jQuery);

猜你在找的jQuery相关文章