Struts1.x系列教程(9):上传肆意多个文件[Java编程]
本文“Struts1.x系列教程(9):上传肆意多个文件[Java编程]”是由七道奇为您精心收集,来源于网络转载,文章版权归文章作者所有,本站不对其观点以及内容做任何评价,请读者自行判断,以下是其具体内容:
从《Struts1.x系列教程(8):上传单个文件》中给出的例子可以看出,在Struts1.x中上传单个文件是非常简单的,但在实际利用中,上传文件的个数普通是不肯定的,如在网络硬盘中,用户可以按照自己的需求上传肆意多个文件(当然,网络硬盘一次上传文件的数目普通也是有上限的,如50个,但用户可以只上传了3个文件,因此,在这种情形下,上传文件的个数也是不肯定的).假如读者用过“网易网盘”或其他近似的服务程序,它们的上传文件功效基本上都是按照用户挑选的文件多少来增添要上传的文件(并非一开始就在界面上放很多<input type=’file’>元从来让用户输入上传文件名).为了让读者也可以利用Struts来实现这个功效,在本节将给出一个用Struts实现的近似“网易网盘”的上传肆意多个文件的Web程序.在实现Web程序之前,让我们先看看图1所示的主页面.
图1
在本程序中,用户通过在文本框中输入本地文件名或利用“浏览”按钮挑选要上传的文件后,就会在界面的下方增添这个被录入的文件名,假如录入有误,或是不想上传某个文件,可以利用“删除”功效将当前文件删除.在确认精确录入全部的上传文件后,利用“上传”按钮开始上传文件.
实现这个Web程序的基本步骤和《Struts1.x系列教程(8):上传单个文件》一文中所给出的例子近似,我们可按下面五步来实现这个Web程序:
【第1步】成立上传文件的JSP页面
要想实现上述的功效,需求在JavaScript中利用DOM技术(关于JavaScript和DOM技术的相关内容已经超越本文谈论的范围,假如读者想理解JavaScript和DOM技术的细节部份,请参阅其他相关技术资料).
在<samples工程目录>目录中成立一个uploadMoreFile.jsp文件,代码以下:
<%@pagepageEncoding="GBK"%>
<%@tagliburi="http://struts.apache.org/tags-html"prefix="html"%>
<html>
<head>
<title>上传肆意多个文件(总大小不能超越2M)</title>
<scriptlanguage="javascript">
//在DOM中插入一个上传文件列表项(div元素)和一个<inputtype="file"/>元素
functioninsertNextFile(obj)
{
//获得上传掌握个数
varchildnum=document.getElementById("files").getElementsByTagName("input").length;
varid=childnum-1;
varfullName=obj.value;
//插入<div>元素及其子元素
varfileHtml='';
fileHtml+='<div id="file_preview'+id+'"style="border-bottom:1pxsolid#CCC;">';
fileHtml+='<img width=30height=30src="images/file.gif"title="'+fullName+'"/>';
fileHtml+='<ahref="javascript:;"onclick="removeFile('+id+');">删除</a> ';
fileHtml+=fullName.substr(fullName.lastIndexOf('')+1)+' </div>';
varfileElement=document.getElementById("files_preview");
fileElement.innerHTML=fileElement.innerHTML+fileHtml;
obj.style.display='none'; //躲藏当前的<inputtype=”file”/>元素
addUploadFile(childnum); //插入新的<inputtype=”file”/>元素
}
// 插入新的<inputtype=”file”/>元素,合适于差别的浏览器(包含IE、FireFox等)
functionaddUploadFile(index)
{
try //用于IE浏览器
{
varuploadHTML=document.createElement("<inputtype='file'id='file_"+index+
"'name='file["+index+"]'/>");
document.getElementById("files").appendChild(uploadHTML);
}
catch(e) //用于其他浏览器
{
varuploadObj=document.createElement("input");
uploadObj.setAttribute("name","file["+index+"]");
uploadObj.setAttribute("onchange","insertNextFile(this)");
uploadObj.setAttribute("type","file");
uploadObj.setAttribute("id","file_"+index);
document.getElementById("files").appendChild(uploadObj);
}
}
functionremoveFile(index) //删除当前文件的<div>和<inputtype=”file”/>元素
{
document.getElementById("files_preview").removeChild(document.getElementById("file_preview"+index));
document.getElementById("files").removeChild(document.getElementById("file_"+index));
}
functionshowStatus(obj) //显示“正在上传文件”提醒信息
{
document.getElementById("status").style.visibility="visible";
}
</script>
</head>
<body>
<html:form enctype="multipart/form-data"action="uploadMoreFile">
<spanid="files"> <%-- 在此处插入用于上传文件的input元素--%>
<input type="file"id="file_0"name="file[0]"onchange="insertNextFile(this)"/>
</span>
<html:submitvalue="上传"onclick="showStatus(this);"/>
</html:form> <p>
<divid="status"style="visibility:hidden;color:Red">正在上传文件</div><p>
<%-- 在此处用DOM技术插入上传文件列表项 --%>
<divid="files_preview"style="width:500px;height:500px;overflow:auto"></div>
</body>
</html>
在uploadMoreFile.jsp文件中利用了JavaScript和DOM技术来掌握新加入的上传文件以及删除不需求的上传文件.并且在加入<input type=”file”/>元素时考虑了差别的浏览器的差别(详见addUploadFile).
以上是“Struts1.x系列教程(9):上传肆意多个文件[Java编程]”的内容,如果你对以上该文章内容感兴趣,你可以看看七道奇为您推荐以下文章:
本文地址: | 与您的QQ/BBS好友分享! |