JSP通过隐藏iframe实现异步上传

之前在做JSP上传文件到服务器的时候，由于没有采用JQuery，而又必须得到上传文件到服务器后返回的文件id等信息。这一个过程就是出现上传的进度条，上传成功后进度条小时，并显示文件的详细内容，是异步的。没有使用插件的话，这一效果将很难实现。

于是可以通过隐藏iframe实现异步上传并得到返回信息的效果，实现原理如下：

1. XML/HTML 代码复制内容到剪贴板  
2.       
3. <form action="/uploadAttaches.do" method="post" enctype="multipart/form-data" target="uploadIframe">        
4.     添加附件：<input type="file" name="upload"/>        
5.     <input type="submit" value="上传"/><br>        
6.     <span id="msg"></span>        
7. </form>        
8. <iframe name="uploadIframe" id="uploadIframe" style="display:none"></iframe>    

需要注意的是form里面的target要与iframe里面的id的值相等，指示是form相应了post事件，也就是post时间相应的时候刷新的是iframe而不是整个页面。

1. JavaScript 代码复制内容到剪贴板  
2.       
3. <script type="text/javascript">          
4.     function callback(msg){          
5.          document.getElementById("msg").innerHTML = msg;            
6.          document.getElementById("path").value=msg;          
7.     }          
8. </script>      

下面是上传到服务器并返回信息的代码：

1. Java 代码复制内容到剪贴板  
2.       
3.     String fileName = "";  //上传文件的文件名        
4.     File tmpDir = new File("d:\\temp");        
5.     String file = "";   //文件的生成路径名        
6.     String showFileName = null;  //显示的文件名        
7.     String showImageUrl = "";  //上传文件的图标路径        
8.     try{        
9.         if (ServletFileUpload.isMultipartContent(request)){        
10.             DiskFileItemFactory factory = new DiskFileItemFactory();        
11.             factory.setSizeThreshold(1 * 1024 * 1024);        
12.             factory.setRepository(tmpDir);        
13.             ServletFileUpload sfu = new ServletFileUpload(factory);        
14.             sfu.setFileSizeMax(20 * 1024 * 1024);        
15.             sfu.setSizeMax(20 * 1024 * 1024);        
16.             sfu.setHeaderEncoding("UTF-8");        
17.             FileItemIterator fii = sfu.getItemIterator(request);        
18.             String uploadPath = getServletContext().getRealPath("/") + "upload";//获取文件路径          
19.             System.out.println(uploadPath);        
20.                     
21.             if (!new File(uploadPath).isDirectory()) {        
22.                 new File(uploadPath).mkdirs();        
23.             }        
24.             while(fii.hasNext()){        
25.                 FileItemStream fis = fii.next();        
26.                 if(!fis .isFormField() && fis.getName().length() > 0){        
27.                     fileName = fis.getName();        
28.                     BufferedInputStream in = new BufferedInputStream(fis.openStream());        
29.                     BufferedOutputStream os = new BufferedOutputStream(new FileOutputStream(new File(uploadPath + File.separator + fileName)));        
30.                     Streams.copy(in, os, true);        
31.                     in.close();        
32.                     os.close();        
33.                     file = "upload/" + fileName;        
34.                 }        
35.             }        
36.         }        
37.         response.getWriter().write("<script>parent.callback('"+file+"')</script>");        
38.     }catch (Exception e) {        
39.         e.printStackTrace();        
40.     }    

     本文转自06peng 51CTO博客，原文链接：http://blog.51cto.com/06peng/962797，如需转载请自行联系原作者