[原創(chuàng)]jQuery PreviewImg 上傳預(yù)覽插件
最新版本請(qǐng)查看 http://www.9icool.net/
jQuery PreviewImg上傳圖預(yù)覽插件,可自動(dòng)縮略圖,它是基于jQuery類庫(kù),可以預(yù)覽上傳控件需上傳的圖, 或html 元素中background-image 屬性u(píng)rl
//====================================================================================================
// [插件名稱] jQuery PreviewImg
//----------------------------------------------------------------------------------------------------
// [描 述] jQuery PreviewImg上傳圖預(yù)覽插件,可自動(dòng)縮略圖,它是基于jQuery類庫(kù),可以預(yù)覽上傳控件需上傳的圖,
// 或html 元素中background-image 屬性u(píng)rl
//----------------------------------------------------------------------------------------------------
// [作者網(wǎng)名] 孤葉
// [郵 箱] solucky2008@gmail.com
// [作者博客] http://9icool.net/
// [更新日期] 2009-06-05
// [版 本 號(hào)] ver1.0
// [參數(shù)說(shuō)明] FitWidth 期望預(yù)覽圖的最大寬
// FitHeight 期望預(yù)覽圖的最大高
// showtype 0表示為 fileupload控件,1 表示顯示HTML元素 background-image
// [注意事項(xiàng)] 如果需要顯示title ,則對(duì)應(yīng)的html元素需要 title 屬性.
// [使用示例] $(document).ready(function() {
// $(":file").previewimage();
// $(".showimgspan").previewimage({ showtype: 1 })
// });
//====================================================================================================
(function($) {
// plugin definition
$.fn.previewimage = function(options) {
var setting = {
FitWidth: 400,
FitHeight: 200,
showtype: 0
}
$.extend(true, setting, options);
return this.each(function() {
if (setting.showtype == 0) {
$(this).change(function() {
var htmlfile = $(this)[0];
var title = $(this).attr("title");
var imgsrc = "";
try {//預(yù)覽代碼，支持 IE6、IE7。
if (document.all) //IE
imgsrc = htmlfile.value;
else
imgsrc = htmlfile.files[0].getAsDataURL(); //FF
if (imgsrc == "" || imgsrc == undefined)
return;
} catch (e) {
return;
}
ShowImgPreview(imgsrc, title, $(this), setting);
}).mouseover(function() {
$(this).trigger("change");
});
}
if (setting.showtype == "1") {
$(this).mouseover(function() {
var src = $(this).css("background-image").replace("url(\"", "").replace("\")", "").replace("url(", "").replace(")", "");
if (src == "" || src == undefined || src == "none") {
return;
}
ShowImgPreview(src, $(this).attr("title"), $(this), setting);
});
}
});
};
/*加載圖
總的原理就是new一個(gè)Image對(duì)象，設(shè)置了src屬性過(guò)后，不斷的檢查需要載入的圖片的寬和高，如果載入圖片成功的話，寬和高都是不為0的數(shù)值，這個(gè)時(shí)候停止Interval ，并且執(zhí)行onLoaded。
*/
function EnhancedImage(src, onLoaded) {
var self = this;
this.src = src;
this.width = 0;
this.height = 0;
this.onLoaded = onLoaded;
this.loaded = false;
this.image = null;
this.load = function() {
if (this.loaded)
return;
this.image = new Image();
this.image.src = this.src;
function loadImage() {
if (self.width != 0 && self.height != 0) {
clearInterval(interval);
self.loaded = true;
self.onLoaded(self); //將實(shí)例傳入回調(diào)函數(shù)
}
self.width = self.image.width; //是number類型
self.height = self.image.height;
}
var interval = setInterval(loadImage, 100);
}
}
function ShowImgPreview(imgsrc, title, posobj, setting) {
if (imgsrc == "" || imgsrc == undefined)
return;
/*動(dòng)態(tài)創(chuàng)建預(yù)覽圖層*/
var newPreviewDiv = $("#picPreview");
if (newPreviewDiv.length == 0) {
var newPreviewDivHtml = "<div id=\"picPreview\" style=\"position:absolute; z-index:999;display:none;\">\
<span style=\"right:0; position:absolute; color:Red;\">xxx</span>\
<img id=\"picPreviewImg\">\
</div>"
newPreviewDiv = $(newPreviewDivHtml)
$("body").append(newPreviewDiv);
}
var newPreview = document.getElementById("picPreviewImg");
var _width = 0;
var _height = 0;
var image = new EnhancedImage(imgsrc, function() {
if (image.width / image.height >= setting.FitWidth / setting.FitHeight) {
if (image.width > setting.FitWidth) {
_width = setting.FitWidth;
_height = (image.height * setting.FitWidth) / image.width;
} else {
_width = image.width;
_height = image.height;
}
} else {
if (image.height > setting.FitHeight) {
_height = setting.FitHeight;
_width = (image.width * setting.FitHeight) / image.height;
} else {
_width = image.width;
_height = image.height;
}
}
newPreview.src = imgsrc;
newPreview.style.height = _height + "px";
newPreview.style.width = _width + "px";
newPreviewDiv.show();
newPreviewDiv.find("span:first").html(title);
newPreviewDiv.css("top", posobj.offset().top - newPreviewDiv.height());
newPreviewDiv.css("left", posobj.offset().left);
posobj.mouseout(function() { $("#picPreview").hide(); });
$(document).click(function() { $("#picPreview").hide(); });
});
image.load();
}
})(jQuery);
更新日志:
2009-6-5 :v1.0發(fā)布
下載插件源碼及示例previewimgDemo.rar (2.67 kb)
如對(duì)本文有疑問(wèn)，請(qǐng)?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會(huì)為你解答！！ 點(diǎn)擊進(jìn)入論壇
