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

ijavagos

浏览: 1191052 次
性别:
来自: 北京

最近访客更多访客>>

abc123

bigguo

eteryang

figure

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1536)

社区版块

存档分类

2011-10 ( 74)
2011-09 ( 59)
2011-08 ( 29)
更多存档...

JavaScript Cache J#Struts JSP

1、JSP页面：
JS控制增加删除多个上传文件框，代码如下：

Java代码

<%@pagelanguage="java"pageEncoding="UTF-8"%>
<%@taglibprefix="s"uri="/struts-tags"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<%@includefile="../../_head.html"%>
<title>文件上传</title>
<metahttp-equiv="pragma"content="no-cache">
<metahttp-equiv="cache-control"content="no-cache">
<metahttp-equiv="expires"content="0">
<scriptlanguage="javascript"type="text/javascript"
src="../js/common/common.js"></script>
<scripttype="text/javascript">
varpos=1;
functionaddFileComponent(){
varelTable=document.getElementById('uploadTable').getElementsByTagName('tbody')[0];
varelTr=document.getElementById('fileTr');
varelTr2=document.getElementById('op');
varnewEleTr=elTr.cloneNode(true);
newEleTr.id="fileTr"+pos;
newEleTr.style.display="";
inputs=newEleTr.getElementsByTagName('input');
inputs[0].id="file"+pos;
varelInput=inputs[1];
elInput.onclick=delFileComponent;
elInput.id="delbutton"+pos++;
elTable.insertBefore(newEleTr,elTr2);
}
functiondelFileComponent(){
varelTable=document.getElementById('uploadTable').getElementsByTagName('tbody')[0];
vartrArr=elTable.getElementsByTagName("tr");
varel=event.srcElement;
for(j=0;j<trArr.length;j++){
tr=trArr[j];
if(tr.getElementsByTagName("input")[1]==el){
elTable.removeChild(tr);
pos--;
break;
}
}
}
functionisValidateFile(obj){
varextend=obj.value.substring(obj.value.lastIndexOf(".")+1);
if(extend==""){
}else{
if(!(extend=="xls"||extend=="doc")){
alert("请上传后缀名为xls或doc的文件!");
varnf=obj.cloneNode(true);
nf.value='';
obj.parentNode.replaceChild(nf,obj);
returnfalse;
}
}
returntrue;
}
</script>
</head>
<body>
<%@includefile="/common/message.jsp"%>
<divclass="body-box">
<divclass="rhead">
<divclass="rpos">
文件上传(可同时上传多份文件)
</div>
<divclass="clear"></div>
</div>
<s:formid="ops"action="csc_mUploadFile"theme="simple"
cssClass="rhead"enctype="multipart/form-data">
<tableid="uploadTable"width="100%"border="0">
<tr>
<td>
<inputtype="file"id="file0"name="uploadFile"size="50"
onchange="isValidateFile(this);"/>
</td>
</tr>
<trid="fileTr"style="display:none;">
<td>
<inputtype="file"size="50"name="uploadFile"
onchange="isValidateFile(this);"/>
 
<inputtype="button"value="删除"/>
</td>
</tr>
<trid="op">
<td>
<inputtype="submit"id="uploadbutton"value="上传"/>
 
<inputtype="button"value="添加"id="addbutton"
onClick="addFileComponent();"/>
 
</td>
</tr>
</table>
</s:form>
<tableclass="pn-ltable"width="100%"cellspacing="1"cellpadding="0"
border="0">
<theadclass="pn-lthead">
<tr>
<th>
序号
</th>
<th>
文件名
</th>
<th>
上传时间
</th>
</tr>
</thead>
<tbodyclass="pn-ltbody">
<tronmouseover="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>

<%@ 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代码

//uploadFile对应页面<inputtype="file"name="uploadFile">
privateList<File>uploadFile;
//文件名对应uploadFile+“FileName”，要不获取不到文件名
privateList<String>uploadFileFileName;
//文件上传
publicStringmUploadFile(){
if(null==uploadFile){
this.addActionError("请上传文件!");
}else{
StringfileName="";
try{
//在自己代码中控制文件上传的服务器目录
Stringdirectory=ServletActionContext.getServletContext().getRealPath("/uploads");
//判断该目录是否存在，不存在则创建
FileUtil.makeDir(directory);
//循环处理上传的文件
for(inti=0,j=uploadFile.size();i<j;i++){
fileName=uploadFileFileName.get(i);
StringfilePath=directory+File.separator+fileName;
FileUtil.uploadFile(uploadFile.get(i),newFile(filePath));
}
}catch(IOExceptione){
this.addActionMessage("");
}
this.addActionMessage("文件上传成功!");
}
return"fileUpload";
}

         //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代码

publicclassFileUtil{
privatestaticfinalintBUFFER_SIZE=16*1024;
publicstaticvoiduploadFile(Filesrc,Filedst)throwsIOException{
InputStreamin=null;
OutputStreamout=null;
try{
in=newBufferedInputStream(newFileInputStream(src),BUFFER_SIZE);
out=newBufferedOutputStream(newFileOutputStream(dst),
BUFFER_SIZE);
byte[]buffer=newbyte[BUFFER_SIZE];
while(in.read(buffer)>0){
out.write(buffer);
}
}finally{
if(null!=in){
in.close();
}
if(null!=out){
out.close();
}
}
}
publicstaticStringgetExtention(StringfileName){
intpos=fileName.lastIndexOf(".");
returnfileName.substring(pos);
}
publicstaticvoidmakeDir(Stringdirectory){
Filedir=newFile(directory);
if(!dir.isDirectory()){
dir.mkdirs();
}
}
publicstaticStringgenerateFileName(StringfileName)
throwsUnsupportedEncodingException{
DateFormatformat=newSimpleDateFormat("yyMMddHHmmss");
StringformatDate=format.format(newDate());
Stringextension=fileName.substring(fileName.lastIndexOf("."));
fileName=newString(fileName.getBytes("iso8859-1"),"gb2312");
returnfileName+"_"+formatDate+newRandom().nextInt(10000)
+extension;
}
}

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文件；

分享到：