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