[原创]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发布

下载插件源码及示例previewimgDemo.rar (2.67 kb)