在上一篇文章中是将文件随表单中其他数据一起提交的，这样在提交一个表单时需要较长的时间，用户体验不是很好。一般网站选择将文件与表单的其他数据分开而单独上传。本文介绍如何利用iframe标签将上传文件模块嵌套在表单中，实现无页面刷新的文件上传。

表单页面

 
    
     
         
  1. <%@ page language="java" contentType="text/html; charset=UTF-8" 
    2.  
         
  2.     pageEncoding="UTF-8"%> 
    3.  
         
  3. <!DOCTYPE> 
    4.  
         
  4. <html> 
    5.  
         
  5. <head> 
    6.  
         
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    7.  
         
  7. <title>Insert title here</title> 
    8.  
         
  8. </head> 
    9.  
         
  9. <body> 
    10.  
         
  10.     <div> 
    11.  
         
  11.         <div> 
    12.  
         
  12.             <h3>Frame嵌套的方式上传文件</h3> 
    13.  
         
  13.         </div> 
    14.  
         
  14.         <div> 
    15.  
         
  15.             <form action="" method="post"> 
    16.  
         
  16.                 <div> 
    17.  
         
  17.                     <span>文件名：</span> 
    18.  
         
  18.                     <input type="text" name="filename" /> 
    19.  
         
  19.                 </div> 
    20.  
         
  20.                 <div> 
    21.  
         
  21.                     <iframe src="FrameFileUpload.jsp"></iframe> 
    22.  
         
  22.                 </div> 
    23.  
         
  23.                 <div> 
    24.  
         
  24.                     <input type="submit" value="提交" /> 
    25.  
         
  25.                 </div> 
    26.  
         
  26.             </form> 
    27.  
         
  27.         </div> 
    28.  
         
  28.     </div> 
    29.  
         
  29. </body> 
    30.  
         
  30. </html> 
    31.  
        
 
    
文件上传页面（通过iframe嵌套在表单页面）
 
    
 
    
     
         
  1. <%@ page language="java" contentType="text/html; charset=UTF-8" 
    2.  
         
  2.     pageEncoding="UTF-8"%> 
    3.  
         
  3. <!DOCTYPE> 
    4.  
         
  4. <html> 
    5.  
         
  5. <head> 
    6.  
         
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    7.  
         
  7. <title>File Upload</title> 
    8.  
         
  8. </head> 
    9.  
         
  9. <body> 
    10.  
         
  10.     <div> 
    11.  
         
  11.         <form action="frameFileLoadAction" enctype="multipart/form-data" 
    12.  
         
  12.             method="post"> 
    13.  
         
  13.             <div> 
    14.  
         
  14.                 <input type="file" name="file" id="file_upload" /> 
    15.  
         
  15.             </div> 
    16.  
         
  16.             <div> 
    17.  
         
  17.                 <input type="submit" value="上传" /> 
    18.  
         
  18.             </div> 
    19.  
         
  19.         </form> 
    20.  
         
  20.     </div> 
    21.  
         
  21.     <div> 
    22.  
         
  22.         <span>上传结果：</span>  
    23.  
         
  23.         <span>  
    24.  
         
  24.             <% 
    25.  
         
  25.                 String isSuccess = request.getParameter("isSuccess"); 
    26.  
         
  26.                 if ("1".equals(isSuccess)) { 
    27.  
         
  27.                     out.print("上传成功"); 
    28.  
         
  28.                 } else if ("0".equals(isSuccess)) { 
    29.  
         
  29.                     out.print("上传失败"); 
    30.  
         
  30.                 } else { 
    31.  
         
  31.                     out.print("还没有上传文件"); 
    32.  
         
  32.                 } 
    33.  
         
  33.             %> 
    34.  
         
  34.         </span> 
    35.  
         
  35.     </div> 
    36.  
         
  36. </body> 
    37.  
         
  37. </html> 
    38.  
        
 
    
struts2配置文件
 
    
 
    
     
         
  1. <?xml version="1.0" encoding="UTF-8" ?> 
    2.  
         
  2. <!DOCTYPE struts PUBLIC 
    3.  
         
  3.     "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" 
    4.  
         
  4.     "http://struts.apache.org/dtds/struts-2.3.dtd"> 
    5.  
         
  5.  
    6.  
         
  6. <struts> 
    7.  
         
  7.     <constant name="struts.devMode" value="true" /> 
    8.  
         
  8.     <constant name="struts.i18n.encoding" value="UTF-8" /> 
    9.  
         
  9.     <constant name="struts.ui.theme" value="simple" /> 
    10.  
         
  10.     <constant name="struts.multipart.maxSize" value="100" /> 
    11.  
         
  11.     <constant name="struts.multipart.saveDir " value="c:/tmp" /> 
    12.  
         
  12.  
    13.  
         
  13.     <package name="fileUpload" extends="struts-default" namespace="/"> 
    14.  
         
  14.         <action name="frameFileLoadAction" class="com.study.action.FileUploadAction" 
    15.  
         
  15.             method="execute"> 
    16.  
         
  16.             <param name="filePath">/filetemp</param> 
    17.  
         
  17.             <result name="success">/FrameFileUpload.jsp?isSuccess=1</result> 
    18.  
         
  18.             <result name="input">/FrameFileUpload.jsp?isSuccess=0</result> 
    19.  
         
  19.         </action> 
    20.  
         
  20.     </package> 
    21.  
         
  21. </struts> 
    22.  
        
 
    
Struts2的Action
 
    
 
    
     
         
  1. package com.study.action; 
    2.  
         
  2.  
    3.  
         
  3. import java.io.File; 
    4.  
         
  4.  
    5.  
         
  5. import org.apache.struts2.ServletActionContext; 
    6.  
         
  6. import com.opensymphony.xwork2.ActionSupport; 
    7.  
         
  7. import com.study.util.FileCopyUtil; 
    8.  
         
  8.  
    9.  
         
  9. public class FileUploadAction extends ActionSupport { 
    10.  
         
  10.  
    11.  
         
  11.     protected File file; 
    12.  
         
  12.     protected String fileFileName; 
    13.  
         
  13.     protected String fileContentType; 
    14.  
         
  14.     protected String filePath; 
    15.  
         
  15.  
    16.  
         
  16.     protected void restoreFile() throws Exception { 
    17.  
         
  17.         if (this.file != null) { 
    18.  
         
  18.             File temp = new File(ServletActionContext.getServletContext() 
    19.  
         
  19.                     .getRealPath(this.filePath) + "/" + this.fileFileName); 
    20.  
         
  20.             FileCopyUtil.copy(this.file, temp); 
    21.  
         
  21.         } 
    22.  
         
  22.     } 
    23.  
         
  23.  
    24.  
         
  24.     @Override 
    25.  
         
  25.     public String execute() throws Exception { 
    26.  
         
  26.         this.restoreFile(); 
    27.  
         
  27.         return "success"; 
    28.  
         
  28.     } 
    29.  
         
  29.  
    30.  
         
  30.     public File getFile() { 
    31.  
         
  31.         return file; 
    32.  
         
  32.     } 
    33.  
         
  33.  
    34.  
         
  34.     public void setFile(File file) { 
    35.  
         
  35.         this.file = file; 
    36.  
         
  36.     } 
    37.  
         
  37.  
    38.  
         
  38.     public String getFileFileName() { 
    39.  
         
  39.         return fileFileName; 
    40.  
         
  40.     } 
    41.  
         
  41.  
    42.  
         
  42.     public void setFileFileName(String fileFileName) { 
    43.  
         
  43.         this.fileFileName = fileFileName; 
    44.  
         
  44.     } 
    45.  
         
  45.  
    46.  
         
  46.     public String getFileContentType() { 
    47.  
         
  47.         return fileContentType; 
    48.  
         
  48.     } 
    49.  
         
  49.  
    50.  
         
  50.     public void setFileContentType(String fileContentType) { 
    51.  
         
  51.         this.fileContentType = fileContentType; 
    52.  
         
  52.     } 
    53.  
         
  53.  
    54.  
         
  54.     public String getFilePath() { 
    55.  
         
  55.         return filePath; 
    56.  
         
  56.     } 
    57.  
         
  57.  
    58.  
         
  58.     public void setFilePath(String filePath) { 
    59.  
         
  59.         this.filePath = filePath; 
    60.  
         
  60.     } 
    61.  
         
  61.  
    62.  
         
  62. } 
    63.  
        
 
    
总结：通过iframe嵌套文件上传页面，从而将文件上传与其他数据分开提交。其实刷新的是iframe。但这样整个页面不会刷新，给用户的感觉更好。
 
    
PS：上传文件后可以将文件的存储位置返回并放在表单中与其他数据一块上传。