在上一篇文章中是将文件随表单中其他数据一起提交的,这样在提交一个表单时需要较长的时间,用户体验不是很好。一般网站选择将文件与表单的其他数据分开而单独上传。本文介绍如何利用iframe标签将上传文件模块嵌套在表单中,实现无页面刷新的文件上传。
表单页面
<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>Inserttitlehere</title></head><body><div><div><h3>Frame嵌套的方式上传文件</h3></div><div><formaction=""method="post"><div><span>文件名:</span><inputtype="text"name="filename"/></div><div><iframesrc="FrameFileUpload.jsp"></iframe></div><div><inputtype="submit"value="提交"/></div></form></div></div></body></html>
文件上传页面(通过iframe嵌套在表单页面)
<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>FileUpload</title></head><body><div><formaction="frameFileLoadAction"enctype="multipart/form-data"method="post"><div><inputtype="file"name="file"id="file_upload"/></div><div><inputtype="submit"value="上传"/></div></form></div><div><span>上传结果:</span><span><%StringisSuccess=request.getParameter("isSuccess");if("1".equals(isSuccess)){out.print("上传成功");}elseif("0".equals(isSuccess)){out.print("上传失败");}else{out.print("还没有上传文件");}%></span></div></body></html>
struts2配置文件
<?xmlversion="1.0"encoding="UTF-8"?><!DOCTYPEstrutsPUBLIC"-//ApacheSoftwareFoundation//DTDStrutsConfiguration2.3//EN""/dtds/struts-2.3.dtd"><struts><constantname="struts.devMode"value="true"/><constantname="struts.i18n.encoding"value="UTF-8"/><constantname="struts.ui.theme"value="simple"/><constantname="struts.multipart.maxSize"value="100"/><constantname="struts.multipart.saveDir"value="c:/tmp"/><packagename="fileUpload"extends="struts-default"namespace="/"><actionname="frameFileLoadAction"class="com.study.action.FileUploadAction"method="execute"><paramname="filePath">/filetemp</param><resultname="success">/FrameFileUpload.jsp?isSuccess=1</result><resultname="input">/FrameFileUpload.jsp?isSuccess=0</result></action></package></struts>
Struts2的Action
packagecom.study.action;importjava.io.File;importorg.apache.struts2.ServletActionContext;importcom.opensymphony.xwork2.ActionSupport;importcom.study.util.FileCopyUtil;publicclassFileUploadActionextendsActionSupport{protectedFilefile;protectedStringfileFileName;protectedStringfileContentType;protectedStringfilePath;protectedvoidrestoreFile()throwsException{if(this.file!=null){Filetemp=newFile(ServletActionContext.getServletContext().getRealPath(this.filePath)+"/"+this.fileFileName);FileCopyUtil.copy(this.file,temp);}}@OverridepublicStringexecute()throwsException{this.restoreFile();return"success";}publicFilegetFile(){returnfile;}publicvoidsetFile(Filefile){this.file=file;}publicStringgetFileFileName(){returnfileFileName;}publicvoidsetFileFileName(StringfileFileName){this.fileFileName=fileFileName;}publicStringgetFileContentType(){returnfileContentType;}publicvoidsetFileContentType(StringfileContentType){this.fileContentType=fileContentType;}publicStringgetFilePath(){returnfilePath;}publicvoidsetFilePath(StringfilePath){this.filePath=filePath;}}
总结:通过iframe嵌套文件上传页面,从而将文件上传与其他数据分开提交。其实刷新的是iframe。但这样整个页面不会刷新,给用户的感觉更好。
PS:上传文件后可以将文件的存储位置返回并放在表单中与其他数据一块上传。