轻松实现图片上传并回显

http://narutolby.iteye.com/blog/1449908

  图片上传及文件上传，前端html实现文件上传和普通的向后台传参数不同，必须用到form表单，同时form标签必须加上enctype="multipart/form-data"属性，method必须为post，表单中的input的type为file，这样前端上传文件的工作就完成了，这里后台文件的存储不做详细的介绍，因为用到的是struts2，文件上传的功能已经封装好了，但是还是需要注意几点，action中类型为File的属性名必须和input标签的name相同，同时action中必须有contentType和fileName属性，这里不是本文讲的重点就不做详细介绍了。 
  大家知道，form表单的post请求是同步请求，如果没有指定target属性，默认情况下提交后会刷新页面，想要做到提交请求后不页面不动即能回显上传的图片，这就需要一些处理，这里我用到了隐藏的iframe，将form表单的target指向iframe的名字，这样form表单提交后返回的结果将在iframe中显示。

  大家知道，form表单的post请求是同步请求，如果没有指定target属性，默认情况下提交后会刷新页面，想要做到提交请求后不页面不动即能回显上传的图片，这就需要一些处理，这里我用到了隐藏的iframe，将form表单的target指向iframe的名字，这样form表单提交后返回的结果将在iframe中显示。 

Html代码  

1.   <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
2. <html>  
3. <head>  
4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
5. <title>Upload Image Demo</title>  
6. <script type="text/javascript" src="js\jquery-1.7.1.min.js"></script>  
7. <script type="text/javascript">  
8.    function upload(){  
9.        $('form').submit();  
10.        $('img').attr('src','img/vote_img_loading.png')  
11.    }  
12.    $(document).ready(function(){  
13.        $(':input[type=file]').change(upload);  
14.    });  
15.      
16.    function showPic(path){  
17.        $('img').attr('src','file/'+path).next('span').css('visibility','visible');  
18.          
19.    }  
20.   
21. </script>  
22. <style type="text/css">  
23. .pic {  
24.     position: relative;  
25.     width: 100px;  
26.     height: 100px;  
27.     float: left;  
28.     display: inline;  
29.     margin: 0 5px 0 0;  
30.     cursor: pointer;  
31.     overflow: hidden;  
32. }  
33.   
34. .pic span {  
35.     position: relative;  
36.     color: white;  
37.     margin: -20px 0 0;  
38.     display: block;  
39.     height: 20px;  
40.     width: 100px;  
41.     text-align: center;  
42.     overflow: hidden;  
43.     line-height: 20px;  
44.     background: url(img/template_list_titlebg.png) ;  
45. }   
46.   
47. .pic form {  
48.     position: absolute;  
49.     width: 100px;  
50.     height: 100px;  
51.     overflow: hidden;  
52.     z-index: 10;  
53.     margin: -100px 0 0;  
54. }  
55.   
56. .pic input {  
57.     font-size: 100px;  
58.     cursor: pointer;  
59.     -moz-opacity: 0;  
60.     filter: alpha(opacity = 0);  
61.     opacity: 0;  
62.     background: none;  
63.     border: none;  
64.     margin: -10px 0 0 -650px 9;  
65. }  
66. </style>  
67. </head>  
68. <body>  
69.     <iframe style="display:none" name="if">  
70.       
71.     </iframe>  
72.     <div class="pic">  
73.         <img height="100" width="100" src="img/update_pic.png"><span  
74.             style="visibility: hidden">重新上传</span>  
75.         <form enctype="multipart/form-data" method="POST" action="upload.action" target="if">  
76.             <input type="file" name="upload"/>  
77.         </form>  
78.     </div>  
79. </body>  
80. </html>  

关于iframe中显示的内容是图片回显的关键，以下是返回的内容： 

Html代码  

1. <html>  
2. <head>  
3. </head>  
4. <body>  
5.  <script type="text/javascript">  
6.  var pid = window.location.search.split('=')[1];  
7.  top.window.showPic(pid);  
8.    
9.  </script>  
10. </body>  
11. </html>  

  可以看到返回的内容很简单，就是一段javascript代码，因为当form表单提交后，我做了url重定向，并把图片的存储路径作为重定向url的参数，这段javascript代码首先从iframe的location中获得图片的存储路径，然后调用父窗口的showPic函数，并将图片存储路径传入函数，showPic函数是写在父床口中的，为什么可以这么做，因为子窗口可以调用父窗口的函数，但是反过来父窗口调用子窗口的函数是不被允许的。showPic函数如下： 

Js代码  

1. function showPic(path){  
2.        $('img').attr('src','file/'+path).next('span').css('visibility','visible');  
3.          
4.    }  

   它的作用就是将img标签的src指向传过来的图片路径，这时候浏览器就回去加载这个图片，这样就轻松的实现了图片上传并迅速回显的功能，我附上了实现这个功能的整个工程，是一个eclipse的maven工程，需要通过本机maven命令下载依赖包。