最新版本请查看 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)