jQuery 的上传图片预览插件

插件代码：

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包起来

<div><img style="display:none;" id="imgPre" alt=""/> </div>

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