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

最新推荐文章于 2019-04-11 11:20:09 发布
最新推荐文章于 2019-04-11 11:20:09 发布
阅读量3.3k 收藏 3
点赞数
分类专栏： J2EE 文章标签： struts buffer string file extension
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shimiso/article/details/6045169
版权
1、JSP页面：
JS控制增加删除多个上传文件框，代码如下：
Java代码 复制代码
  1. <%@ page language="java" pageEncoding="UTF-8"%>   
  2. <%@ taglib prefix="s" uri="/struts-tags"%>   
  3.   
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  5. <html xmlns="http://www.w3.org/1999/xhtml">   
  6.     <head>   
  7.         <%@include file="../../_head.html"%>   
  8.         <title>文件上传</title>   
  9.         <meta http-equiv="pragma" content="no-cache">   
  10.         <meta http-equiv="cache-control" content="no-cache">   
  11.         <meta http-equiv="expires" content="0">   
  12.         <script language="javascript" type="text/javascript"  
  13.             src="../js/common/common.js"></script>   
  14.         <script type="text/javascript">   
  15.                 
  16.               var pos = 1;   
  17.            
  18.               function addFileComponent() {   
  19.                 var elTable = document.getElementById('uploadTable').getElementsByTagName('tbody')[0];   
  20.                 var elTr = document.getElementById('fileTr');   
  21.                 var elTr2 = document.getElementById('op');   
  22.                 var newEleTr = elTr.cloneNode(true);   
  23.                 newEleTr.id = "fileTr" + pos;          
  24.                 newEleTr.style.display = "";   
  25.                 inputs = newEleTr.getElementsByTagName('input');   
  26.                 inputs[0].id="file" + pos;   
  27.                 var elInput = inputs[1];   
  28.                 elInput.οnclick=delFileComponent;   
  29.                 elInput.id="delbutton" + pos++;   
  30.                 elTable.insertBefore(newEleTr, elTr2);   
  31.              }   
  32.   
  33.             function delFileComponent() {   
  34.                 var elTable = document.getElementById('uploadTable').getElementsByTagName('tbody')[0];   
  35.                 var trArr = elTable.getElementsByTagName("tr");   
  36.                 var el = 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.             }   
  46.                
  47.             function isValidateFile(obj){   
  48.                var extend = obj.value.substring(obj.value.lastIndexOf(".")+1);   
  49.                if(extend==""){   
  50.                }else{   
  51.                    if(!(extend=="xls"||extend=="doc")){   
  52.                       alert("请上传后缀名为xls或doc的文件!");   
  53.                       var nf = obj.cloneNode(true);   
  54.                       nf.value='';   
  55.                       obj.parentNode.replaceChild(nf, obj);   
  56.                       return false;   
  57.                    }   
  58.                }   
  59.                return true;   
  60.             }   
  61.         </script>   
  62.     </head>   
  63.     <body>   
  64.         <%@ include file="/common/message.jsp"%>   
  65.         <div class="body-box">   
  66.             <div class="rhead">   
  67.                 <div class="rpos">   
  68.                     文件上传(可同时上传多份文件)   
  69.                 </div>   
  70.                 <div class="clear"></div>   
  71.             </div>   
  72.             <s:form id="ops" action="csc_mUploadFile" theme="simple"  
  73.                 cssClass="rhead"  enctype = "multipart/form-data">   
  74.                 <table id="uploadTable" width="100%" border="0">   
  75.                     <tr>   
  76.                         <td>   
  77.                             <input type="file" id="file0" name="uploadFile" size="50"  
  78.                                 οnchange="isValidateFile(this);" />   
  79.                         </td>   
  80.                     </tr>   
  81.                     <tr id="fileTr" style="display: none;">   
  82.                         <td>   
  83.                             <input type="file" size="50" name="uploadFile"  
  84.                                 οnchange="isValidateFile(this);" />   
  85.                             &nbsp;   
  86.                             <input type="button" value="删除" />   
  87.                         </td>   
  88.                     </tr>   
  89.                     <tr id="op">   
  90.                         <td>   
  91.                             <input type="submit" id="uploadbutton" value="上传" />   
  92.                             &nbsp;   
  93.                             <input type="button" value="添加" id="addbutton"  
  94.                                 onClick="addFileComponent();" />   
  95.                             &nbsp;   
  96.                         </td>   
  97.                     </tr>   
  98.                 </table>   
  99.             </s:form>   
  100.             <table class="pn-ltable" width="100%" cellspacing="1" cellpadding="0"  
  101.                 border="0">   
  102.                 <thead class="pn-lthead">   
  103.                     <tr>   
  104.                         <th>   
  105.                             序号   
  106.                         </th>   
  107.                         <th>   
  108.                             文件名   
  109.                         </th>   
  110.                         <th>   
  111.                             上传时间   
  112.                         </th>   
  113.                     </tr>   
  114.                 </thead>   
  115.                 <tbody class="pn-ltbody">   
  116.                     <tr οnmοuseοver="Pn.LTable.lineOver(this);"  
  117.                         οnmοuseοut="Pn.LTable.lineOut(this);"  
  118.                         οnclick="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.οnclick=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"
								οnchange="isValidateFile(this);" />
						</td>
					</tr>
					<tr id="fileTr" style="display: none;">
						<td>
							<input type="file" size="50" name="uploadFile"
								οnchange="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 οnmοuseοver="Pn.LTable.lineOver(this);"
						οnmοuseοut="Pn.LTable.lineOut(this);"
						οnclick="Pn.LTable.lineSelect(this);">
						<td>
						</td>
						<td>
						</td>
						<td>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
</html>


2、Action后台处理上传文件：
Java代码 复制代码
  1.         //uploadFile对应页面<input type="file" name="uploadFile">  
  2. private List<File> uploadFile;   
  3.         //文件名对应uploadFile+“FileName”，要不获取不到文件名  
  4. private List<String> uploadFileFileName;      
  5. // 文件上传   
  6. public String mUploadFile() {   
  7.    if (null == uploadFile) {   
  8.     this.addActionError("请上传文件!");   
  9.    } else {   
  10.     String fileName = "";   
  11.       try {   
  12.                       //在自己代码中控制文件上传的服务器目录  
  13.          String directory = ServletActionContext.getServletContext().getRealPath("/uploads");   
  14.                       //判断该目录是否存在，不存在则创建  
  15.                       FileUtil.makeDir(directory);   
  16.                       //循环处理上传的文件  
  17.             for(int i=0,j=uploadFile.size();i<j;i++){   
  18.                 fileName = uploadFileFileName.get(i);   
  19.                 String filePath = directory + File.separator + fileName;   
  20.                 FileUtil.uploadFile(uploadFile.get(i), new File(filePath));   
  21.             }   
  22.         } catch (IOException e) {   
  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. public class FileUtil {   
  2.   
  3.     private static final int BUFFER_SIZE = 16 * 1024;   
  4.   
  5.     public static void uploadFile(File src, File dst) throws IOException {   
  6.   
  7.         InputStream in = null;   
  8.         OutputStream out = null;   
  9.         try {   
  10.             in = new BufferedInputStream(new FileInputStream(src), BUFFER_SIZE);   
  11.             out = new BufferedOutputStream(new FileOutputStream(dst),   
  12.                     BUFFER_SIZE);   
  13.             byte[] buffer = new byte[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.         }   
  25.   
  26.     }   
  27.   
  28.     public static String getExtention(String fileName) {   
  29.         int pos = fileName.lastIndexOf(".");   
  30.         return fileName.substring(pos);   
  31.     }   
  32.   
  33.     public static void makeDir(String directory) {   
  34.         File dir = new File(directory);   
  35.   
  36.         if (!dir.isDirectory()) {   
  37.             dir.mkdirs();   
  38.         }   
  39.   
  40.     }   
  41.   
  42.     public static String generateFileName(String fileName)   
  43.             throws UnsupportedEncodingException {   
  44.         DateFormat format = new SimpleDateFormat("yyMMddHHmmss");   
  45.         String formatDate = format.format(new Date());   
  46.         String extension = fileName.substring(fileName.lastIndexOf("."));   
  47.         fileName = new String(fileName.getBytes("iso8859-1"), "gb2312");   
  48.         return fileName + "_" + formatDate + new Random().nextInt(10000)   
  49.                 + extension;   
  50.     }   
  51.   
  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文件；

完毕!


  转载请标明出处 http://blog.csdn.net/shimiso 

技术交流群:361579846

 

袭烽
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS+Struts2多文件上传实例详解
10-18
在本文中，我们将深入探讨如何使用JavaScript（JS）与Struts2框架实现多文件上传功能。这个实例将帮助我们理解如何在Web应用中处理用户选择的多个文件，并将其上传到服务器。 首先，让我们看下JSP页面的部分代码。...
Struts2简单的实现多文件上传
weixin_42642314的博客
03-16 271
1：文件上传 1、struts2的文件上传功能使用的是apache下的commons-fileupload来实现。 2、Jsp的表单要求是post提交，并且enctype=”multipart/form-data” jsp页面代码： 文件: 3、action的代码：在Action中需要提供3个属性，一个File 类型，名称是表单域名，其它两个分别是表单域名+Fil...
Struts2多个文件上传的分析及源代码说明
热门推荐
redarmychen的专栏
03-11 2万+
Struts2多个文件上传 10级学员 韩晓爽课堂笔记 多个文件上传分为List集合和数组，下面我们着重介绍一下list集合的上传。都大同小异。 一  介绍 1．  在struts2文件上传的时候要先导入struts2的几个包，在struts2.3.1.2中，导入的包如图所视： 从图上可以看出其中文件上传所需要的是包为commons-fileupload-1.2.2.jar和comm
Struts2多文件上传
茨时代べ 的博客
04-11 327
在 Struts 2 中 实 现 多 文 件 上 传 也 非 常 简 单， 你 可 以 将 多 个<s:file> 绑 定 到 action 的 File 数组或 File 列表。 步骤 <s:form action="uploads" method="POST" enctype="multipart/form-data"> <s:file name="fil...
【Struts2】文件上传（一个文件和多个文件）
邢玉 傻傻的坚持，总有一天会成功！
03-03 530
引言          还记得学习struts1的时候做了文件上传的Demo，现在学习Struts2了，同样，再做一个文件上传的Demo…… 一、单个文件上传  步骤         先将文件上传相关的jar包引进来，分别是：commons-fileupload-1.2.1.jar和commons-io-1.3.2.jar 1、  建立上传文件的index.jsp页面 <%@ pa
struts2之多个文件上传
weixin_34288121的博客
03-21 72
通过3种方式模拟多个文件上传，效果如下所示           目录结构   新建Action 第一种方式 package com.ljq.action;import java.io.File;import org.apache.commons.io.FileUtils;import org.apache.struts2.ServletActionContext;im...
ajaxFileUpload+struts2实现多文件上传(源码)
07-02
在本文中，我们将深入探讨如何使用`ajaxFileUpload`与`Struts2`框架结合，实现多文件上传功能。这个示例源码提供了一个实用的方法，使得用户可以在不刷新整个页面的情况下，上传多个文件，提高了用户体验。 首先，`...
Struts2+uploadify多文件上传实例
08-27
在本实例中，我们探讨的是如何结合Struts2和uploadify插件实现多文件上传的功能。 Uploadify是一个基于jQuery的插件，它提供了一种用户友好的方式来上传文件。在网页中，用户可以通过简单的拖放或者点击按钮来选择...
Ext+Struts2多文件上传
04-16
通过以上步骤，我们可以利用ExtJS的用户界面和Struts2的后台处理能力，实现一个完整的多文件上传功能。这个功能不仅提高了用户体验，还简化了开发流程。在实际项目中，还可以进一步优化，例如添加进度条显示、预览...
swfupload+struts2多文件上传的例子
10-10
本教程将详细讲解如何利用SWFUpload与Struts2框架来实现多文件上传的示例。 首先，让我们了解SWFUpload。SWFUpload是一款开源的Flash上传组件，它允许用户在不离开当前页面的情况下上传多个文件。通过在浏览器上...
Struts2多个文件上传
05-25
Struts2多个文件上传 多个文件上传分为List集合和数组，下面我们着重介绍一下list集合的上传。都大同小异。
struts2上传文件，批量上传文件，需要的直接下载
08-25
本demo实现了struts2批量上传文件，利用html5进行批量选择，然后利用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
struts2实现多文件上传功能
05-16
struts2 实现多文件上传功能，是一个很好的学习参考资料
struts2实现的多个文件上传
04-11
struts2实现的多个文件上传struts2实现的多个文件上传struts2实现的多个文件上传struts2实现的多个文件上传
Struts2之文件上传(单文件/多文件)
皓月星辰
08-13 136
&lt;一&gt;简述： Struts2的文件上传其实也是通过拦截器来实现的，只是该拦截器定义为默认拦截器了，所以不用自己去手工配置，&lt;interceptor name="fileUpload" class="org.apache.struts2.interceptor.FileUploadInterceptor"/&gt; &lt;二&gt;指定用户上传文件的大小，有两种方式： 1）...
Struts2 实现多文件上传
一只萌萌的博客
08-23 2350
前台form 表单：设置method=post,enctype=multipart/form-data。struts2在原有的上传解析器继承上做了进一步封装，更进一步简化了文件上传。Action需要使用3个属性来封装该文件域的信息：（1）类型为File的*属性封装了该文件域对应的文件内容； （2）类型为String的***FileName属性封装了该文件域对应的文件的文件类型； （3）类型为
Struts2 多文件上传
灯塔的CSDN博客
03-26 540
Struts2 多文件上传 UploadAction.java 文件 package com.action; import java.io.*; import org.apache.struts2.ServletActionContext; import com.opensymphony.xwork2.ActionSupport; public class UploadActio
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值