上传图片预览,支持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);
本文地址:https://www.stayed.cn/item/6087
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我