上传文件界面

浏览数：80 / 时间：2015年06月09日

在大多数的邮箱和博客中都有上传文件这一功能，他们的实现了上传文件之后再上传文件的下面产生一个列表用于展示应经上传成功的文件列表，并且后面带有删除，编辑或者下载等功能。

下面这段代码实现了，上传文件之后产生文件列表用于展示上传的文件。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP ‘index.jsp‘ starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<style type="text/css">
	</style>
	<script type="text/javascript">
	//文件上传按钮行
	var count =0;
	var index = 1;
	function chage(node){
	var oDiv = document.getElementById("uplaodFile");
	var span = oDiv.children(1);
	count = count +1;
	span.innerHTML = "上传了<b>"+count+"</b>个文件";
	
	
	//包含所有的产生的div的div
	var oOtherDiv = document.getElementById("otherdiv");
	var oChildDiv = document.createElement("div");
	var div_id = document.createAttribute("id");
	index = index <<1;
    	div_id.nodeValue = index ;
    	oChildDiv.setAttributeNode(div_id);
	var oSpan = document.createElement("span");
	var Odel = document.createElement("span");
	var Olook = document.createElement("span");
	 	//var a_href = document.createAttribute("href");
    	//a_href.nodeValue ="#";
     	var a_Text = document.createTextNode("		删除");
     	Odel.appendChild(a_Text);
     	var b_Text = document.createTextNode("	下载");
     	Olook.appendChild(b_Text);
      //	var a_name = document.createAttribute("class");
    	//a_name.nodeValue = "ChildClass";
      	//Odel.setAttributeNode(a_href);
       //Odel.setAttributeNode(a_name);

      var a_click = document.createAttribute("onclick");
        Odel.setAttributeNode(a_click);
      //*
	var br = document.createElement("br");
	oSpan.innerHTML = "文件："+oDiv.children(0).value.substring(oDiv.children(0).value.lastIndexOf("\\")+1);
		oChildDiv.appendChild(oSpan);
		oChildDiv.appendChild(Odel);
		oChildDiv.appendChild(Olook);
		oChildDiv.appendChild(br);
		
		oOtherDiv.appendChild(oChildDiv);
		//Odel.prototype.node = Odel.parent().parent();
		Odel.onclick = function(){
		count = count -1;
		if(count == 0){
			span.innerHTML = "未选择文件";
		}else{
			span.innerHTML = "上传了<b>"+count+"</b>个文件";
		}
			oOtherDiv.removeChild(this.parentNode);
		};
		Olook.onclick = function(){alert("下载动作");};
	};		
	</script>
  </head>
  
  <body>
    <form action="servlet/TestServlet"  method="post">上传新的文件：<br><br>
    <div id="uplaodFile">
    <input type="file" onchange="chage(this);return false;" size="0" ><span> 未选择文件</span>
   </div>
    <div id=‘otherdiv‘>
    </div>  
    </form>
  </body>
</html>

当然上面的代码比简陋，在实际使用中，还得加强，这只是一种思路

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

上传文件界面