您的位置：首页 > 编程语言 > Java开发

【Struts轻松搞定多文件上传】

2013-10-07 15:35 295 查看

在前面的《Apache Commons FileUpload实现多文件上传》文章中介绍了使用第三方组件ApacheCommons FileUpload来实现多文件的上传，对比今天用struts实现的多文件上传，总觉得还是struts用起来更加顺手，也更加简洁方便，不忍自己独享，所以拿出来跟大家一块分享一下。如果你读过前面提到的那篇文章，相信再理解本文将会更加容易，另外提供源码以方便大家学习。由于本文属于一片纯技术文章，废话就不多说了，下面看一下struts是如何实现多文件上传的吧。

　　1.首先来看前台。在前台页面中通过js实现上传控件的添加和删除。描述的详细一些就是点一下“增加一行”按钮就会增加一个上传控件，同样点击该控件后边的“删除”则会将该上传控件去除。目的在于用js实现添加任意数目的文件的功能。

　　[html]

　　<span style="font-family:Microsoft YaHei;font-size:14px;"><%@ page language="java" pageEncoding="GB18030"%>

　　<%@ taglib uri="struts.apache.org/tags-html" prefix="html" %>

　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

　　<html>

　　<head>

　　<title>multiUploadDemo</title>

　　<script type="text/javascript" src="js/myjs.js">

　　</script>

　　</head>

　　<body bgcolor="#ffffff">

　　<div id="status"></div>

　　<form method="post" action="upload.do" enctype="multipart/form-data" >

　　<table id="tb"></table>

　　<input type="button" name="AddOnLine" value="增加一行" onclick="additem('tb')"/>

　　<input type="submit" name="btnUpload" value="上传" onclick="upload()"/>

　　</form>

　　</body>

　　</html>

　　</span>

　　在前台页面中引用的js文件中的代码如下：

　　[javascript]

　　<span style="font-family:Microsoft YaHei;font-size:14px;"> var num = 0;

　　function upload(){

　　document.getElementById("status").innerHTML = "文件上传中...";

　　}

　　function additem(id)

　　{

　　var row,cell,str;

　　row = eval("document.all["+'"'+id+'"'+"]").insertRow();

　　if(row != null )

　　{

　　cell = row.insertCell();

　　str="<input type="+'"'+"file"+'"'+" name=uploadFile["+ num +"].file><input type="+'"'+"button"+'"'+" value="+'"'+"删除"+'"'+" onclick='deleteitem(this,"+'"'+"tb"+'"'+");'>"

　　cell.innerHTML=str;

　　}

　　num++;

　　}

　　function deleteitem(obj,id)

　　{

　　var rowNum,curRow;

　　curRow = obj.parentNode.parentNode;

　　rowNum = eval("document.all."+id).rows.length - 1;

　　eval("document.all["+'"'+id+'"'+"]").deleteRow(curRow.rowIndex);

　　}

　　function callback(msg)

　　{

　　document.getElementById("status").innerHTML = "文件上传完成...<br>" + msg;

　　}</span>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航