一、圖片上傳實現本地預覽
由于上傳圖片功能，現在大多數都需要在本地實現預覽，為了能夠更好的讓用戶體驗到效果，實現成品的證明，需要兼容好幾種瀏覽器，所有通過各個例子整合了這個例子插件，兼容火狐、谷歌、ie8，其他的沒有進行測試過
(function($){
jQuery.fn.extend({
uploadPreview: function(opts){
opts = jQuery.extend({
width: 0,
height: 0,
imgPreview: null,
imgType: ["gif", "jpeg", "jpg", "bmp", "png"],
callback: function(){ return false; }
}, opts || {});
var _self = this;
var _this = $(this);
var imgPreview = $(opts.imgPreview);
//設置樣式
autoScaling = function(){
imgPreview.css({"margin-left": 0,"margin-top": 0,"width":opts.width,"height":opts.height});
imgPreview.show();
}
//file按鈕出發事件
_this.change(function(){
if (this.value) {
if (!RegExp("/.(" + opts.imgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
alert("圖片類型必須是" + opts.imgType.join("，") + "中的一種");
this.value = "";
return false;
}
if ($.browser.msie) {//判斷ie
var path = $(this).val();
if (/"/w/W"/.test(path)) {
path = path.slice(1,-1);
}
imgPreview.attr("src",path);
imgPreview.css({"margin-left": 0,"margin-top": 0,"width":opts.width,"height":opts.height});
setTimeout("autoScaling()", 100);
}
else {
if ($.browser.version < 7) {
imgPreview.attr('src', this.files.item(0).getAsDataURL());
}
else {
oFReader = new 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){
imgPreview.attr('src', oFREvent.target.result);
};
var oFile = this.files[0];
oFReader.readAsDataURL(oFile);
}
imgPreview.css({"margin-left": 0,"margin-top": 0,"width":opts.width,"height":opts.height});
setTimeout("autoScaling()", 100);
}
}
opts.callback();
});
}
});
})(jQuery);
二、調用方法
jQuery(function(){
jQuery("#idFile1").uploadPreview({
width: 100,
height: 100,
imgPreview: "#idImg1",
imgType: ["bmp", "gif", "png", "jpg"],
callback: function() {
ip1();
return false;
}
});
);
