上传文件界面

skyGAYD

2014-12-31

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

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

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

当然上面的代码比简陋，在实际使用中，还得加强，这只是一种思路,有没有人给我说一下，为什么将删除和下载换成 a标签之后点击之后的方法中this 表示的链接。顺便还有一个就是拿到链接之后怎么获取的该链接的节点

html代码上传文件 html文件