Struts1.x系列教程（9）：上传任意多个文件 - 编程入门网
Struts1.x系列教程（9）：上传任意多个文件时间:2011-01-10 银河使者从《Struts1.x系列教程（8）：上传单个文件》中给出的例子可以看出，在Struts1.x中上传单个文件是非常简单的，但在实际应用中，上传文件的个数一般是不确定的，如在网络硬盘中，用户可以根据自己的需要上传任意多个文件（当然，网络硬盘一次上传文件的数目一般也是有上限的，如50个，但用户可以只上传了3个文件，因此，在这种情况下，上传文件的个数也是不确定的）。如果读者用过“网易网盘”或其他类似的服务程序，它们的上传文件功能基本上都是根据用户选择的文件多少来添加要上传的文件（并不是一开始就在界面上放很多<input type=’file’>元素来让用户输入上传文件名）。为了让读者也可以使用Struts来实现这个功能，在本节将给出一个用Struts实现的类似“网易网盘”的上传任意多个文件的Web程序。在实现Web程序之前，让我们先看看图1所示的主页面。
图1 在本程序中，用户通过在文本框中输入本地文件名或使用“浏览”按钮选择要上传的文件后，就会在界面的下方添加这个被录入的文件名，如果录入有误，或是不想上传某个文件，可以使用“删除”功能将当前文件删除。在确认正确录入所有的上传文件后，使用“上传”按钮开始上传文件。 实现这个Web程序的基本步骤和《Struts1.x系列教程（8）：上传单个文件》一文中所给出的例子类似，我们可按下面五步来实现这个Web程序： Struts1.x系列教程（9）：上传任意多个文件(2)时间:2011-01-10 银河使者【第1步】建立上传文件的JSP页面 要想实现上述的功能，需要在JavaScript中使用DOM技术（关于JavaScript和DOM技术的相关内容已经超出本文讨论的范围，如果读者想了解JavaScript和DOM技术的细节部分，请参阅其他相关技术资料）。 在<samples工程目录>目录中建立一个uploadMoreFile.jsp文件，代码如下：
<%@ page pageEncoding="GBK"%> <%@ taglib uri="http://struts.apache.org/tags-html" prefix="html"%> <html> <head> <title>上传任意多个文件（总大小不能超过2M)</title> <script language="javascript"> // 在DOM中插入一个上传文件列表项（div元素)和一个<input type="file"/>元素 function insertNextFile(obj) {// 获取上传控制个数 var childnum = document.getElementById("files").getElementsByTagName("input").length; var id = childnum - 1; var fullName = obj.value; // 插入<div>元素及其子元素 var fileHtml = ''''; fileHtml += ''<div id = "file_preview'' + id + ''" style ="border-bottom: 1px solid #CCC;">''; fileHtml += ''<img width =30 height = 30 src ="images/file.gif" title="'' + fullName + ''"/>''; fileHtml += ''<a href="javascript:;" onclick="removeFile('' + id + '');">删除</a> ''; fileHtml += fullName.substr(fullName.lastIndexOf(''\\'')+1) +'' </div>''; var fileElement = document.getElementById("files_preview"); fileElement.innerHTML = fileElement.innerHTML + fileHtml; obj.style.display = ''none''; // 隐藏当前的<input type=”file”/>元素 add |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢! |
