jQuery 的上传图片预览插件

时间：2010-12-26 来源：scgw

view plaincopy to clipboardprint?
01.(function($) {
02.    $.fn.PreviewImage = function(options) {
03.        var Default = {
04.            ImageClientId: "",
05.            MaxWidth: 300,
06.            MaxHeight: 300
07.        };
08.        $.extend(true, Default, options);
09.        return this.each(function() {
10.            if (Default.ImageClientId != "") {
11.                $(this).unbind("change");
12.                $(this).change(function() {
13.                    if ($(this).val() == "") {
14.                        $("#" + Default.ImageClientId).parent("div").hide();
15.                        return;
16.                    }
17.                    else {
18.                        $("#" + Default.ImageClientId).parent("div").show();
19.                    }
20.                    if ($.browser.msie) {
21.                        $("#" + Default.ImageClientId).attr("src", $(this).val());
22.                    }
23.                    else {
24.                        $("#" + Default.ImageClientId).attr("src", $(this)[0].files[0].getAsDataURL());
25.                    }
26.                    if ($.browser.msie && $.browser.version > 6) {
27.                        $("#" + Default.ImageClientId).hide();
28.                        $("#" + Default.ImageClientId).parent("div").css({ 'z-index': '999',
29.                            'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)',
30.                            'max-width': Default.MaxWidth + 'px', 'max-height': Default.MaxHeight + 'px',
31.                            'width': Default.MaxWidth + 'px', 'height': Default.MaxHeight + 'px'
32.                        });
33.                        var div = $("#" + Default.ImageClientId).parent("div")[0];
34.                        div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = $("#" + Default.ImageClientId).attr("src");
35.                    }
36.                });
37.
38.                $("#" + Default.ImageClientId).load(function() {
39.                    var image = new Image();
40.                    image.src = $(this).attr("src");
41.                    $(this).attr("width", Default.MaxWidth);
42.                    $(this).attr("height", Default.MaxHeight);
43.                    $(this).attr("alt", Default.MaxWidth + "x" + Default.MaxHeight);
44.                });
45.            }
46.        });
47.    };
48.})(jQuery);
(function($) {
    $.fn.PreviewImage = function(options) {
        var Default = {
            ImageClientId: "",
            MaxWidth: 300,
            MaxHeight: 300
        };
        $.extend(true, Default, options);
        return this.each(function() {
            if (Default.ImageClientId != "") {
                $(this).unbind("change");
                $(this).change(function() {
                    if ($(this).val() == "") {
                        $("#" + Default.ImageClientId).parent("div").hide();
                        return;
                    }
                    else {
                        $("#" + Default.ImageClientId).parent("div").show();
                    }
                    if ($.browser.msie) {
                        $("#" + Default.ImageClientId).attr("src", $(this).val());
                    }
                    else {
                        $("#" + Default.ImageClientId).attr("src", $(this)[0].files[0].getAsDataURL());
                    }
                    if ($.browser.msie && $.browser.version > 6) {
                        $("#" + Default.ImageClientId).hide();
                        $("#" + Default.ImageClientId).parent("div").css({ 'z-index': '999',
                            'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)',
                            'max-width': Default.MaxWidth + 'px', 'max-height': Default.MaxHeight + 'px',
                            'width': Default.MaxWidth + 'px', 'height': Default.MaxHeight + 'px'
                        });
                        var div = $("#" + Default.ImageClientId).parent("div")[0];
                        div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = $("#" + Default.ImageClientId).attr("src");
                    }
                });

                $("#" + Default.ImageClientId).load(function() {
                    var image = new Image();
                    image.src = $(this).attr("src");
                    $(this).attr("width", Default.MaxWidth);
                    $(this).attr("height", Default.MaxHeight);
                    $(this).attr("alt", Default.MaxWidth + "x" + Default.MaxHeight);
                });
            }
        });
    };
})(jQuery);

使用方法：

view plaincopy to clipboardprint?
01.$(document).ready(function(){
02.            $("#FileUpload1").PreviewImage({ ImageClientId: "imgPre", MaxWidth: "300", MaxHeight: "200" });
03.        });
$(document).ready(function(){
            $("#FileUpload1").PreviewImage({ ImageClientId: "imgPre", MaxWidth: "300", MaxHeight: "200" });
        });

注意事项：

img 标签外面要有一个DIV包起来

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/zhou5157/archive/2010/03/26/5419821.aspx