使用struts2在页面局部位置上传文件,不影响其他文本框数据

a 夏天 提交于 2019-12-04 00:17:30

      这个问题主要源于实验室项目的开发需求的变化。之前的需求只是简单的进行一系列数据的输入和选择,然后提交数据,所以之前一直使用jQuery的ajax的方式进行数据提交,在url中直接传递过去拼接好的页面输入和选择的数据。之前的功能页面如下:

      之后跟客户沟通,客户需要在该功能操作区域加上上传文件的功能,项目中使用struts2进行文件的上传,于是就有两种解决方案产生:
1.在整个功能操作区域加上<form></form>标签,在提交数据的时候进行文件上传,但是这种方式对于我们的项目来说改动比较大。
2.在该页面加上一个上传按钮,在浏览选择好文件之后,直接单击“上传”按钮完成数据的上传,于是就遇见了一个问题,在使用struts2进行文件上传的时候,需要在struts配置文件中配置一个跳转的页面,如果上传成功之后跳转到现在的页面,就会导致之前选择和输入的数据的丢失。
       针对第二种解决思路遇见的问题,就采用了标题所说的在局部位置进行上传文件,不影响其他文本框中的数据,解决方案如下:
       1.定义一个uploadFile.jsp页面,将文件上传单独放在这个页面里面,由这个页面完成文件的上传。    

<form id="addForm" action="ffamanage/WareHouse_uploadFileAction" method="post" enctype="multipart/form-data">					
		<label><font style="font-size: 12px">验收文件:</font></label>
		<input type="file" name="uploadFile" id="uploadFile"/>
		<input type="submit" value="上传">
	</form>
       2.在页面该功能区域下面,加上一个<iframe></iframe>标签(不显示边框),在页面加上这个内联框架,这样位于其中的页面不管是进行刷新还是跳转不影响其外围文本框中的数据,设置它的width,height,name,id以及src属性,其中src属性值为第一步中创建的页面。
<iframe width="600px" height="30px" id="uploadOperation" name="uploadOperation" align="left" src="ffamanage/uploadFile.jsp" frameborder="0" scrolling="auto" marginwidth="0" marginheight="0">
</iframe>
       3.在对应的action当中编写文件上传的代码,并在struts.xml文件中进行文件类型与大小的配置,由于这里需要在上传成功之后,给一个文件上传成功的提示并显示文件名,于是定义了一个result.jsp页面,用于跳转到该页面,进行信息显示,并将上传的文件名赋给该页面的一个隐藏域,为之后使用。
result.jsp页面内容:
<label><font style="font-size: 12px">文件上传成功:<s:property value="uploadFileFileName"/></font></label>
<input type="hidden" name="fileName" id="fileName" value='<s:property value="uploadFileFileName"/>'>

struts.xml配置文件内容如下:

<result name="success">/ffamanage/result.jsp</result>
       4.result.jsp页面将显示在iframe的内联框架中,之所以加了一个隐藏域是因为在提交数据的时候需要将文件名保存到数据库中,而文件名只有在提交所有页面数据的时候才能保存在数据库而非在文件上传成功之后,因此在跳转之后需要将文件名进行保存,这里就赋值给一个隐藏域。
      5.于是另一个问题就产生了,如何从iframe框架中的页面获取对应控件的值,网上搜了一下有以下三种方式
       第一 :  iframename.document.all.控件名!?
       第二 : parent.framename.document.formname.对象名
       第三 : document.frames["iframename"].document.all.objectid.value  
var fileName = uploadOperation.document.all.fileName.value;
      6.最后在单击保存按钮的时候,就可以将所有的页面数据进行拼接提交了,这种方式并不影响之前系统采用的jQuery的ajax方式的提交数据。


     7.如果文件上传的不是必选项,就会有一个问题,如果不上传文件,相应的也就不会跳转到result.jsp页面,此处iframe显示的是最初的uploadFile.jsp页面,导致第5步获取文件名出错,原因是:fileName隐藏域只在result.jsp页面而不再uploadFile.jsp页面。解决方案:在uploadFile.jsp页面当中也添加一个fileName的隐藏域,这样不管跳转没跳转第5步的语句始终是正确的,程序可以正常执行,只不过文件名数据为空。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!