jquery实现图片上传之前预览的方法

这篇文章主要介绍了jquery实现图片上传之前预览的方法,涉及jquery针对图片及页面元素的相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了jquery实现图片上传之前预览的方法。分享给大家供大家参考。具体实现方法如下：

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
3. <html xmlns="http://www.w3.org/1999/xhtml"> 
4. <head> 
5. <title></title> 
6. <script src="jquery-1.8.1.min.js" type="text/javascript"></script> 
7. <script> 
8. /* 
9. *参数说明: Img:图片ID;Width:预览宽度;Height:预览高度;ImgType:支持文件类型;Callback:选择文件显示图片后回调方法; 
10. *使用方法:  
11. <div> 
12. <img id="ImgPr" width="120" height="120" /></div> 
13. <input type="file" id="up" /> 
14. 把需要进行预览的IMG标签外 套一个DIV 然后给上传控件ID给予uploadPreview事件 
15. $("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120, ImgType: ["gif", "jpeg", "jpg", "bmp", "png"], Callback: function () { }}); 
16. */ 
17. jQuery.fn.extend({ 
18. uploadPreview: function (opts) { 
19. var _self = this, 
20. _this = $(this); 
21. opts = jQuery.extend({ 
22. Img: "ImgPr", 
23. Width: 100, 
24. Height: 100, 
25. ImgType: ["gif", "jpeg", "jpg", "bmp", "png"], 
26. Callback: function () {} 
27. }, opts || {}); 
28. _self.getObjectURL = function (file) { 
29. var url = null; 
30. if (window.createObjectURL != undefined) { 
31. url = window.createObjectURL(file) 
32. } else if (window.URL != undefined) { 
33. url = window.URL.createObjectURL(file) 
34. } else if (window.webkitURL != undefined) { 
35. url = window.webkitURL.createObjectURL(file) 
36. } 
37. return url 
38. }; 
39. _this.change(function () { 
40. if (this.value) { 
41. if (!RegExp("/.(" + opts.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) { 
42. alert("选择文件错误,图片类型必须是" + opts.ImgType.join("，") + "中的一种"); 
43. this.value = ""; 
44. return false 
45. } 
46. if ($.browser.msie) { 
47. try { 
48. $("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0])) 
49. } catch (e) { 
50. var src = ""; 
51. var obj = $("#" + opts.Img); 
52. var div = obj.parent("div")[0]; 
53. _self.select(); 
54. if (top != self) { 
55. window.parent.document.body.focus() 
56. } else { 
57. _self.blur() 
58. } 
59. src = document.selection.createRange().text; 
60. document.selection.empty(); 
61. obj.hide(); 
62. obj.parent("div").css({ 
63. 'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)', 
64. 'width': opts.Width + 'px', 
65. 'height': opts.Height + 'px' 
66. }); 
67. div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src 
68. } 
69. } else { 
70. $("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0])) 
71. } 
72. opts.Callback() 
73. } 
74. }) 
75. } 
76. }); 
77. $(function () { 
78. $("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120 }); 
79. }); 
80. </script> 
81. </head> 
82. <body> 
83. <div style="width:500px;margin:0px auto;"><h2>图片上传预览演示</h2> 
84. <div><img id="ImgPr" width="120" height="120" /></div> 
85. <input type="file" id="up" /> 
86. </div> 
87. </body> 
88. </html> 

希望本文所述对大家的jquery程序设计有所帮助。