当前位置:首页 > 开发 > Web前端 > 前端 > 正文

上传文件界面

发表于: 2014-12-31   作者:兰州wzq   来源:转载   浏览:
摘要: 在大多数的邮箱和博客中都有上传文件这一功能,他们的实现了上传文件之后再上传文件的下面产生一个列表用于展示应经上传成功的文件列表,并且后面带有删除,编辑或者下载等功能。 下面这段代码实现了,上传文件之后产生文件列表用于展示上传的文件。 <%@ page language="java" import="java.util.*" pageEncoding

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

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

<%@ 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 表示的链接。顺便还有一个就是拿到链接之后怎么获取的该链接的节点

上传文件界面

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
在一个项目里使用到了FCKEditor.它的文件上传管理系统做得还是很不错的.我们能不能借用一下呢? 第
   作者:聂靖宇(niejingyu) 网址:http://xiaopihai.iteye.com/blog/469422 >>> 转载
今天无聊整个了程序出来玩玩,感觉挺好用的。写篇博文把它分享了吧,大家用后给点意见,看下能否把
文件上传概述 实现web开发中的文件上传功能,需完成如下二步操作: 在web页面中添加上传输入项 在se
最近刚做完的需求中有通过导入文本文件后,系统将文本文件中的数据保存到数据库中的要求。首先设计
文件上传概述 实现web开发中的文件上传功能,需完成如下二步操作: 在web页面中添加上传输入项 在se
今天学习到Struts2的文件上传部分,由于风中叶的视频声音和画面对不起来,于是自己写了一个。代码贡
文件搜索2_____基于图形界面 上次做过控制台的文件搜索,感觉不过瘾,就估摸着做了一个界面化的搜索
J2EE开发各类资源下载清单, 史上最全IT资源,个人收藏总结! 1. 单文件上传: struts-fileupload.xml
前提条件: 1 上传的前提首要条件,在上传的之前需要把form表单的ectype设置成为multipart/form-data
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号