[原创]jQuery PreviewImg 上传预览插件
最新版本请查看 http://www.9icool.net/
jQuery PreviewImg上传图预览插件,可自动缩略图,它是基于jQuery类库,可以预览上传控件需上传的图, 或html 元素中background-image 属性url
//====================================================================================================
// [插件名称] jQuery PreviewImg
//----------------------------------------------------------------------------------------------------
// [描 述] jQuery PreviewImg上传图预览插件,可自动缩略图,它是基于jQuery类库,可以预览上传控件需上传的图,
// 或html 元素中background-image 属性url
//----------------------------------------------------------------------------------------------------
// [作者网名] 孤叶
// [邮 箱] solucky2008@gmail.com
// [作者博客] http://9icool.net/
// [更新日期] 2009-06-05
// [版 本 号] ver1.0
// [参数说明] FitWidth 期望预览图的最大宽
// FitHeight 期望预览图的最大高
// showtype 0表示为 fileupload控件,1 表示显示HTML元素 background-image
// [注意事项] 如果需要显示title ,则对应的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 {//预览代码，支持 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一个Image对象，设置了src属性过后，不断的检查需要载入的图片的宽和高，如果载入图片成功的话，宽和高都是不为0的数值，这个时候停止Interval ，并且执行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); //将实例传入回调函数
}
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;
/*动态创建预览图层*/
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发布
