当前位置:首页 > 开发 > Web前端 > JavaScript > 正文

JavaScript+Struts2实现可选择性多文件上传

发表于: 2013-04-05   作者:ducklsl   来源:转载   浏览次数:
摘要: 页面代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My JSP 'index.jsp' starting page</title> <SCRIPT type=
页面代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>My JSP 'index.jsp' starting page</title>
		<SCRIPT type="text/javascript">
		function addMore(){
			var td = document.getElementById("more");
			var br = document.createElement("br");//创建一个换行标签
			//创建一个类型为type的input标签
			var input = document.createElement("input");
			input.type="file";//设置input类型为file
			input.name="upload"//设置input的名称为upload
			//创建一个类型为button的input标签	
			var button = document.createElement("input");
			button.type="button"; //设置input类型为button
			button.value="Remove"; //设置input显示为Remove
			//设置按钮事件
			button.onclick=function(){
				td.removeChild(br);
				td.removeChild(input);
				td.removeChild(button);
			}
			td.appendChild(br);
			td.appendChild(input);
			td.appendChild(button);		
		}
		</SCRIPT>
	</head>
	<body>
		<form action="uploadfile4" method="post" enctype="multipart/form-data">
			<table border="1px">
				<tr>
					<td>
						file
					</td>
					<td id="more">
						<input type="file" name="upload" />
						<input type="button" value="Add More..." onclick="addMore()"/>
					</td>
				</tr>
				<tr align="right">
					<td colspan="2">
						<input type="submit" value="上传"/>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>
当多文件上传时,在Struts2的Action类中可以使用数组也可以使用List<E>泛型的方式来获取上传的多文件,获取数组后,处理方式就和单个文件上传的方式一样
Action处理代码:
private File[] upload; // 上传的文件,与页面的<input type="file"
							// name="upload"/>中的name属性一致
	private String[] uploadFileName;// 文件名,Struts规定个格式 [name]FileName
	private String[] uploadContentType;// 文件类型,Struts规定的格式[name]ContentType
	@SuppressWarnings("deprecation")
	public String execute() {
		try {
			for (int i = 0; i < upload.length; i++) {
				InputStream is = new FileInputStream(upload[i]);// 创建输入流,读取上传文件
				// String parentDir =
				// ServletActionContext.getServletContext().getRealPath(parentDir);
				String parentDir = ServletActionContext.getRequest()
						.getRealPath("/upload");// 指定文件上传目录
				File destFile = new File(parentDir, this.getUploadFileName()[i]);
				if (!destFile.getParentFile().exists()) {// 判断存放文件的目录是否存在
					destFile.getParentFile().mkdir();// 不存在则创建
				}
				OutputStream os = new FileOutputStream(destFile);// 创建输出流,将内容写入文件
				byte[] buffer = new byte[1024];
				int length = 0;
				while ((length = is.read(buffer)) > 0) {// 读文件
					os.write(buffer, 0, length);// 写文件
				}
				is.close();// 关闭inputStream
				os.close();// 关闭outputStream
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
		return "success";
	}

也可以使用泛型的方式进行接收,并且处理:
private List<File> upload;  //上传的文件,与页面的<input type="file" name="upload"/>中的name属性一致
	private List<String> uploadFileName;//文件名,Struts规定个格式 [name]FileName
	private List<String> uploadContentType;//文件类型,Struts规定的格式[name]ContentType
	@SuppressWarnings("deprecation")
	public String execute() {
		try {
			for(int i=0;i<upload.size();i++){
				InputStream is = new FileInputStream(upload.get(i));//创建输入流,读取上传文件
				//String parentDir = ServletActionContext.getServletContext().getRealPath(parentDir);
				String parentDir = ServletActionContext.getRequest().getRealPath(
						"/upload");//指定文件上传目录
				File destFile = new File(parentDir, this.getUploadFileName().get(i));
				if (!destFile.getParentFile().exists()) {//判断存放文件的目录是否存在
					destFile.getParentFile().mkdir();//不存在则创建
				}
				OutputStream os = new FileOutputStream(destFile);//创建输出流,将内容写入文件
				byte[] buffer = new byte[1024];
				int length = 0;
				while ((length = is.read(buffer)) > 0) {// 读文件
					os.write(buffer, 0, length);// 写文件
				}
				is.close();//关闭inputStream
				os.close();//关闭outputStream
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
		return "success";
	}
只是对多个文件进行遍历,而处理的方式和单个文件是一致的

JavaScript+Struts2实现可选择性多文件上传

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
首先,将以下js代码放入页面这里我判断的是只能上传xls格式的文件,可以根据自己的需求修改js中的ch
参照struts2官网的例子做了一个用struts2实现多文件上传的例子,这里是上传图片文件。 所需要应用的
今天遇到一个问题要用file实现多文件上传,实现效果需要把file控件用span或则div来遮盖 实现效果如
一、开发环境:Ecplise , jdk1.7 , web3.0 二、常见web工程 创建步骤在这里就不详细说了,相信大家
多文件上传思路是,上传一个文件服务器上同时入库表,然后会callback返回文件信息,js将文件ID插入i
重新修改了以前的多文件上传,加入了JPG图片压缩功能! 概述 Flash多文件上传,提供JPG图片压缩选项
在传统的HTTP应用上传文件想要同时上传多个文件并查看上传进度是一件很麻烦的事情,当然现在也有一些
以下內容轉載以下網址: http://hi.baidu.com/half_cup_coffee/blog/item/14c63c35fbf53e8fa71e1269.
一般的原理都是使用FileReference来实现,而FileReference只是单个文件的上传,从上面的两个例子里
利用Ext.ux.UploadDialog实现异步多文件上传 1、先看看效果: 接下来详细说说怎么用它:java实现 2
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号