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 = '@H_403_4@' 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="https://www.f2er.com/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插件的种类 1、封装对象方法 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进...
扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。 入门 编写一个jQuery插件开始于给...
最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js。 兼容性如图: ht...
一、什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异...
AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一...