JS+Struts2多文件上传完整示例

最新推荐文章于 2019-04-11 11:20:09 发布
最新推荐文章于 2019-04-11 11:20:09 发布 · 65 阅读 · 0
文章标签：

#JavaScript #Cache #J# #Struts #JSP #ViewUI

本文介绍了一个使用JSP实现的文件上传功能，包括前端页面的文件输入与动态增删功能，以及后端通过Struts框架接收并处理上传文件的过程。此外，还提供了一个文件处理工具类用于文件上传。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1、JSP页面：
JS控制增加删除多个上传文件框，代码如下：
Java代码 复制代码
  1. <%@pagelanguage="java"pageEncoding="UTF-8"%>
  2. <%@taglibprefix="s"uri="/struts-tags"%>
  4. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. <htmlxmlns="http://www.w3.org/1999/xhtml">
  6. <head>
  7. <%@includefile="../../_head.html"%>
  8. <title>文件上传</title>
  9. <metahttp-equiv="pragma"content="no-cache">
  10. <metahttp-equiv="cache-control"content="no-cache">
  11. <metahttp-equiv="expires"content="0">
  12. <scriptlanguage="javascript"type="text/javascript"
  13. src="../js/common/common.js"></script>
  14. <scripttype="text/javascript">
  16. varpos=1;
  18. functionaddFileComponent(){
  19. varelTable=document.getElementById('uploadTable').getElementsByTagName('tbody')[0];
  20. varelTr=document.getElementById('fileTr');
  21. varelTr2=document.getElementById('op');
  22. varnewEleTr=elTr.cloneNode(true);
  23. newEleTr.id="fileTr"+pos;
  24. newEleTr.style.display="";
  25. inputs=newEleTr.getElementsByTagName('input');
  26. inputs[0].id="file"+pos;
  27. varelInput=inputs[1];
  28. elInput.onclick=delFileComponent;
  29. elInput.id="delbutton"+pos++;
  30. elTable.insertBefore(newEleTr,elTr2);
  31. }
  33. functiondelFileComponent(){
  34. varelTable=document.getElementById('uploadTable').getElementsByTagName('tbody')[0];
  35. vartrArr=elTable.getElementsByTagName("tr");
  36. varel=event.srcElement;
  37. for(j=0;j<trArr.length;j++){
  38. tr=trArr[j];
  39. if(tr.getElementsByTagName("input")[1]==el){
  40. elTable.removeChild(tr);
  41. pos--;
  42. break;
  43. }
  44. }
  45. }
  47. functionisValidateFile(obj){
  48. varextend=obj.value.substring(obj.value.lastIndexOf(".")+1);
  49. if(extend==""){
  50. }else{
  51. if(!(extend=="xls"||extend=="doc")){
  52. alert("请上传后缀名为xls或doc的文件!");
  53. varnf=obj.cloneNode(true);
  54. nf.value='';
  55. obj.parentNode.replaceChild(nf,obj);
  56. returnfalse;
  57. }
  58. }
  59. returntrue;
  60. }
  61. </script>
  62. </head>
  63. <body>
  64. <%@includefile="/common/message.jsp"%>
  65. <divclass="body-box">
  66. <divclass="rhead">
  67. <divclass="rpos">
  68. 文件上传(可同时上传多份文件)
  69. </div>
  70. <divclass="clear"></div>
  71. </div>
  72. <s:formid="ops"action="csc_mUploadFile"theme="simple"
  73. cssClass="rhead"enctype="multipart/form-data">
  74. <tableid="uploadTable"width="100%"border="0">
  75. <tr>
  76. <td>
  77. <inputtype="file"id="file0"name="uploadFile"size="50"
  78. onchange="isValidateFile(this);"/>
  79. </td>
  80. </tr>
  81. <trid="fileTr"style="display:none;">
  82. <td>
  83. <inputtype="file"size="50"name="uploadFile"
  84. onchange="isValidateFile(this);"/>
  85. &nbsp;
  86. <inputtype="button"value="删除"/>
  87. </td>
  88. </tr>
  89. <trid="op">
  90. <td>
  91. <inputtype="submit"id="uploadbutton"value="上传"/>
  92. &nbsp;
  93. <inputtype="button"value="添加"id="addbutton"
  94. onClick="addFileComponent();"/>
  95. &nbsp;
  96. </td>
  97. </tr>
  98. </table>
  99. </s:form>
  100. <tableclass="pn-ltable"width="100%"cellspacing="1"cellpadding="0"
  101. border="0">
  102. <theadclass="pn-lthead">
  103. <tr>
  104. <th>
  105. 序号
  106. </th>
  107. <th>
  108. 文件名
  109. </th>
  110. <th>
  111. 上传时间
  112. </th>
  113. </tr>
  114. </thead>
  115. <tbodyclass="pn-ltbody">
  116. <tronmouseover="Pn.LTable.lineOver(this);"
  117. onmouseout="Pn.LTable.lineOut(this);"
  118. onclick="Pn.LTable.lineSelect(this);">
  119. <td>
  120. </td>
  121. <td>
  122. </td>
  123. <td>
  124. </td>
  125. </tr>
  126. </tbody>
  127. </table>
  128. </div>
  129. </body>
  130. </html>
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<%@include file="../../_head.html"%>
		<title>文件上传</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<script language="javascript" type="text/javascript"
			src="../js/common/common.js"></script>
		<script type="text/javascript">
		     
		      var pos = 1;
		
		      function addFileComponent() {
				var elTable = document.getElementById('uploadTable').getElementsByTagName('tbody')[0];
				var elTr = document.getElementById('fileTr');
				var elTr2 = document.getElementById('op');
				var newEleTr = elTr.cloneNode(true);
				newEleTr.id = "fileTr" + pos;		
				newEleTr.style.display = "";
				inputs = newEleTr.getElementsByTagName('input');
				inputs[0].id="file" + pos;
				var elInput = inputs[1];
				elInput.onclick=delFileComponent;
				elInput.id="delbutton" + pos++;
				elTable.insertBefore(newEleTr, elTr2);
			 }

			function delFileComponent() {
				var elTable = document.getElementById('uploadTable').getElementsByTagName('tbody')[0];
				var trArr = elTable.getElementsByTagName("tr");
				var el = event.srcElement;
				for(j = 0; j < trArr.length; j++) {
					tr = trArr[j];
					if(tr.getElementsByTagName("input")[1] == el) {
						elTable.removeChild(tr);
						pos--;
						break;
					}
				}
			}
			
			function isValidateFile(obj){
			   var extend = obj.value.substring(obj.value.lastIndexOf(".")+1);
			   if(extend==""){
			   }else{
				   if(!(extend=="xls"||extend=="doc")){
				      alert("请上传后缀名为xls或doc的文件!");
				      var nf = obj.cloneNode(true);
                      nf.value='';
                      obj.parentNode.replaceChild(nf, obj);
				      return false;
				   }
			   }
			   return true;
			}
		</script>
	</head>
	<body>
		<%@ include file="/common/message.jsp"%>
		<div class="body-box">
			<div class="rhead">
				<div class="rpos">
					文件上传(可同时上传多份文件)
				</div>
				<div class="clear"></div>
			</div>
			<s:form id="ops" action="csc_mUploadFile" theme="simple"
				cssClass="rhead"  enctype = "multipart/form-data">
				<table id="uploadTable" width="100%" border="0">
					<tr>
						<td>
							<input type="file" id="file0" name="uploadFile" size="50"
								onchange="isValidateFile(this);" />
						</td>
					</tr>
					<tr id="fileTr" style="display: none;">
						<td>
							<input type="file" size="50" name="uploadFile"
								onchange="isValidateFile(this);" />
							&nbsp;
							<input type="button" value="删除" />
						</td>
					</tr>
					<tr id="op">
						<td>
							<input type="submit" id="uploadbutton" value="上传" />
							&nbsp;
							<input type="button" value="添加" id="addbutton"
								onClick="addFileComponent();" />
							&nbsp;
						</td>
					</tr>
				</table>
			</s:form>
			<table class="pn-ltable" width="100%" cellspacing="1" cellpadding="0"
				border="0">
				<thead class="pn-lthead">
					<tr>
						<th>
							序号
						</th>
						<th>
							文件名
						</th>
						<th>
							上传时间
						</th>
					</tr>
				</thead>
				<tbody class="pn-ltbody">
					<tr onmouseover="Pn.LTable.lineOver(this);"
						onmouseout="Pn.LTable.lineOut(this);"
						onclick="Pn.LTable.lineSelect(this);">
						<td>
						</td>
						<td>
						</td>
						<td>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
</html>


2、Action后台处理上传文件：
Java代码 复制代码
  1. //uploadFile对应页面<inputtype="file"name="uploadFile">
  2. privateList<File>uploadFile;
  3. //文件名对应uploadFile+“FileName”，要不获取不到文件名
  4. privateList<String>uploadFileFileName;
  5. //文件上传
  6. publicStringmUploadFile(){
  7. if(null==uploadFile){
  8. this.addActionError("请上传文件!");
  9. }else{
  10. StringfileName="";
  11. try{
  12. //在自己代码中控制文件上传的服务器目录
  13. Stringdirectory=ServletActionContext.getServletContext().getRealPath("/uploads");
  14. //判断该目录是否存在，不存在则创建
  15. FileUtil.makeDir(directory);
  16. //循环处理上传的文件
  17. for(inti=0,j=uploadFile.size();i<j;i++){
  18. fileName=uploadFileFileName.get(i);
  19. StringfilePath=directory+File.separator+fileName;
  20. FileUtil.uploadFile(uploadFile.get(i),newFile(filePath));
  21. }
  22. }catch(IOExceptione){
  23. this.addActionMessage("");
  24. }
  25. this.addActionMessage("文件上传成功!");
  26. }
  27. return"fileUpload";
  28. }
         //uploadFile对应页面<input type="file" name="uploadFile">
	private List<File> uploadFile;
         //文件名对应uploadFile+“FileName”，要不获取不到文件名
	private List<String> uploadFileFileName;   
	// 文件上传
	public String mUploadFile() {
	   if (null == uploadFile) {
		this.addActionError("请上传文件!");
	   } else {
		String fileName = "";
		  try {
                       //在自己代码中控制文件上传的服务器目录
		     String directory = ServletActionContext.getServletContext().getRealPath("/uploads");
                       //判断该目录是否存在，不存在则创建
                       FileUtil.makeDir(directory);
                       //循环处理上传的文件
				for(int i=0,j=uploadFile.size();i<j;i++){
					fileName = uploadFileFileName.get(i);
					String filePath = directory + File.separator + fileName;
					FileUtil.uploadFile(uploadFile.get(i), new File(filePath));
				}
			} catch (IOException e) {
                 this.addActionMessage("");
			}
            this.addActionMessage("文件上传成功!");
		}
		return "fileUpload";
	}

FileUtil代码如下：
Java代码 复制代码
  1. publicclassFileUtil{
  3. privatestaticfinalintBUFFER_SIZE=16*1024;
  5. publicstaticvoiduploadFile(Filesrc,Filedst)throwsIOException{
  7. InputStreamin=null;
  8. OutputStreamout=null;
  9. try{
  10. in=newBufferedInputStream(newFileInputStream(src),BUFFER_SIZE);
  11. out=newBufferedOutputStream(newFileOutputStream(dst),
  12. BUFFER_SIZE);
  13. byte[]buffer=newbyte[BUFFER_SIZE];
  14. while(in.read(buffer)>0){
  15. out.write(buffer);
  16. }
  17. }finally{
  18. if(null!=in){
  19. in.close();
  20. }
  21. if(null!=out){
  22. out.close();
  23. }
  24. }
  26. }
  28. publicstaticStringgetExtention(StringfileName){
  29. intpos=fileName.lastIndexOf(".");
  30. returnfileName.substring(pos);
  31. }
  33. publicstaticvoidmakeDir(Stringdirectory){
  34. Filedir=newFile(directory);
  36. if(!dir.isDirectory()){
  37. dir.mkdirs();
  38. }
  40. }
  42. publicstaticStringgenerateFileName(StringfileName)
  43. throwsUnsupportedEncodingException{
  44. DateFormatformat=newSimpleDateFormat("yyMMddHHmmss");
  45. StringformatDate=format.format(newDate());
  46. Stringextension=fileName.substring(fileName.lastIndexOf("."));
  47. fileName=newString(fileName.getBytes("iso8859-1"),"gb2312");
  48. returnfileName+"_"+formatDate+newRandom().nextInt(10000)
  49. +extension;
  50. }
  52. }
public class FileUtil {

	private static final int BUFFER_SIZE = 16 * 1024;

	public static void uploadFile(File src, File dst) throws IOException {

		InputStream in = null;
		OutputStream out = null;
		try {
			in = new BufferedInputStream(new FileInputStream(src), BUFFER_SIZE);
			out = new BufferedOutputStream(new FileOutputStream(dst),
					BUFFER_SIZE);
			byte[] buffer = new byte[BUFFER_SIZE];
			while (in.read(buffer) > 0) {
				out.write(buffer);
			}
		} finally {
			if (null != in) {
				in.close();
			}
			if (null != out) {
				out.close();
			}
		}

	}

	public static String getExtention(String fileName) {
		int pos = fileName.lastIndexOf(".");
		return fileName.substring(pos);
	}

	public static void makeDir(String directory) {
		File dir = new File(directory);

		if (!dir.isDirectory()) {
			dir.mkdirs();
		}

	}

	public static String generateFileName(String fileName)
			throws UnsupportedEncodingException {
		DateFormat format = new SimpleDateFormat("yyMMddHHmmss");
		String formatDate = format.format(new Date());
		String extension = fileName.substring(fileName.lastIndexOf("."));
		fileName = new String(fileName.getBytes("iso8859-1"), "gb2312");
		return fileName + "_" + formatDate + new Random().nextInt(10000)
				+ extension;
	}

}



扩展：
1.可以实现带进度条的上传与下载；
2.可以用xml文件记录上传的文件清单，并且可以根据页面对上传文件的操作来修改相应的xml文件；
iteye_20309
关注
Struts2多个文件上传
05-25
Struts2多个文件上传 多个文件上传分为List集合和数组，下面我们着重介绍一下list集合的上传。都大同小异。
JS+Struts2多文件上传实例详解
10-18
在本文中，我们将深入探讨如何使用JavaScript（JS）与Struts2框架实现多文件上传功能。这个实例将帮助我们理解如何在Web应用中处理用户选择的多个文件，并将其上传到服务器。 首先，让我们看下JSP页面的部分代码。...
Struts2教程7：上传任意多个文件
zpchen
05-22 155
[color=violet][color=blue]一、上传单个文件 上传文件是很多Web程序都具有的功能。在Struts1.x中已经提供了用于上传文件的组件。而在Struts2中提供了一个更为容易操作的上传文件组件。所不同的是，Struts1.x的上传组件需要一个ActionForm来传递文件，而Struts2的上传组件是一个拦截器（这个拦截器不用配置，是自动装载的）。在本文中先介...
struts2多文件上传（修改名称、压缩图片、删除图片）
粉末无颜的专栏
03-18 3675
一下代码已经测试过，放心使用：   ----------------upload.jsp------------------------- %@taglib prefix="s" uri="/struts-tags"%> http://www.w3.org/1999/xhtml"> 使用数组上传多个文件    文件标题：    选择第一个文件：  
Ext+Struts2实现文件上传源码示例
- 通过分析这些文件，可以具体了解如何在实际项目中集成Ext JS和Struts2来实现文件上传功能。 综上所述，标题和描述中提供的信息表明，通过结合Ext JS和Struts2框架，开发者可以构建一个能够处理文件上传的Web应用...
ajaxFileUpload+struts2实现多文件上传(源码)
07-02
在本文中，我们将深入探讨如何使用`ajaxFileUpload`与`Struts2`框架结合，实现多文件上传功能。这个示例源码提供了一个实用的方法，使得用户可以在不刷新整个页面的情况下，上传多个文件，提高了用户体验。 首先，`...
ExtJs+Struts2实现多文件上传的教程与示例
本节内容将围绕ExtJs和Struts2技术结合实现多文件上传的知识点进行详细阐述。ExtJs是一个基于JavaScript的前端框架，用于构建丰富的互联网应用程序。Struts2是Apache组织下的一个Java EE应用程序框架，用于构建企业...
Ext+Struts2多文件上传
04-16
通过以上步骤，我们可以利用ExtJS的用户界面和Struts2的后台处理能力，实现一个完整的多文件上传功能。这个功能不仅提高了用户体验，还简化了开发流程。在实际项目中，还可以进一步优化，例如添加进度条显示、预览...
Struts2实现多文件上传
03-17
NULL 博文链接：https://fengyunxiao.iteye.com/blog/467216
struts2实现多文件上传功能
05-16
struts2 实现多文件上传功能，是一个很好的学习参考资料
struts2实现的多个文件上传
04-11
struts2实现的多个文件上传struts2实现的多个文件上传struts2实现的多个文件上传struts2实现的多个文件上传
js 上传文件预览的简单实例
12-28
1. FILE API html5提供了FIle和FileReader两个方法，可以读取文件信息并读取文件。 2. example <html> <body> <div id=test-image-preview style> </div> <br> <div id=t
纯JS异步上传文件实例
06-02
纯JS异步上传文件实例
struts2多文件上传
u012427937的专栏
05-09 486
struts2中多文件上传，和文件上传都chabu
Struts2多文件上传
茨时代べ 的博客
04-11 391
在 Struts 2 中 实 现 多 文 件 上 传 也 非 常 简 单， 你 可 以 将 多 个<s:file> 绑 定 到 action 的 File 数组或 File 列表。 步骤 <s:form action="uploads" method="POST" enctype="multipart/form-data"> <s:file name="fil...
struts 2多文件上传
mexican_jacky的专栏
08-03 482
==========================上传页面 index.jsp====================================== String path = request.getContextPath(); String basePath
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值