`
兰州wzq
  • 浏览: 9448 次
  • 性别: Icon_minigender_1
  • 来自: 兰州
社区版块
存档分类
最新评论

上传文件界面

阅读更多

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

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

<%@ 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
2
分享到:
评论

相关推荐

    java Swing 上传文件

    java Swing 上传文件-------------------------------------------------------------------------------------------------------------------------------------------------------

    多文件批量上传界面漂亮

    多文件批量上传界面漂亮 jsp页面控制多文件上传 把这个部署到Eclipse里面就可以看到效果 然后提取您需要的部分。

    jquery-uploadify 多文件上传界面

    jquery-uploadify 多文件上传的js文件。界面优美,功能强大,实现同时上传多个文件的js界面化工具

    finalshell.zip

    自带可视化文件目录,方便linux远程链接,服务器操作神器,汉化界面,支持文件拖拽上传,cpu及内存可视化

    java图形化实现文件上传

    利用java图形化界面和网络编程相结合实现的--文件上传。 运行步骤: (1)分别运行工程两个包中的两个.java文件(UploadClient.java和UploadServer.java)分别会弹出“上传客服端”和“上传服务器”两个窗口。 ...

    java图形化实现文件上传_javagui上传文件,gui编写上传下载文件功能-Java文档类资源

    利用java图形化界面和网络编程相结合实现的--文件上传。 运行步骤: (1)分别运行工程两个包中的两个.java文件(UploadClient.java和UploadServer.java)分别会弹出“上传客服端”和“上传服务器”两个窗口。 ...

    struts2文件上传下载(jsp)

    使用ecplise打开即可,upload.jsp是上传文件界面,show.jsp中可以下载文件,相关的java代码在src目录下,很简单不多说,可运行。上传的文件可以在tomcat下的wtpwebapps下的files文件夹中看到。(注意:每一次重新部署...

    简单的仿QQ界面源码聊天与上传文件

    简单的仿QQ界面源码,含服务器与客户端。实现实时聊天,上传文件。界面简单,如果需要漂亮的界面C++版本

    EXTJS3.0多文件上传组件

    用extjs实现的多文件上传,界面很好看,而且很好用的,失望大家试试看

    jQuery css3文件上传动画界面代码

    jQuery css3文件上传动画界面代码

    java socket 文件上传(客户端服务器 )无界面

    java socket实用案例,主要是文件上传,客户端上传到服务器,存储在服务器根目录下,根据相应代码,也可以互换。如果积分不够,可以看我博客,有此类文章,内含代码。

    Flex和Servlet结合上传文件

    1、利用Flex作为上传文件界面,通过servlet地址连接服务器端 2、Servlet处理上传文件过程 3、通过配置文件web.xml传递参数 4、达到Flex和Servlet进行交互,上传文件

    漂亮的H5+Ajax文件上传页模版_完美兼容浏览器

    1.可用于移动端H5 2.可用于小程序webview,用于替代wx.uploadFile的技术方案 3.PHP服务端文件接收请使用$_FILES...5.如果后端接收到的tmp_name为空,请检查服务端允许上传的文件大小,比如PHP.ini的upload_max_filesize

    ExtJS实现多文件上传UploadDialog For ExtJS3.x

    将struts-2.1.6\lib目录下的struts2-codebehind-plugin-2.1.6.jar、struts2-core-2.1.6.jar、struts2-spring-plugin-2.1.6.jar、xwork-2.1.2.jar、ognl-2.6.11.jar、freemarker-2.3.13.jar、commons-fileupload-...

    C#界面美化文件

    本文档包含C#界面美化文件ssk格式,内有测试窗口,选择非常方便!

    java实现文件上传

    利用java图形化界面和网络编程相结合实现的--文件上传。 运行步骤: (1)分别运行工程两个包中的两个.java文件(UploadClient.java和UploadServer.java)分别会弹出“上传客服端”和“上传服务器”两个窗口。 (2)...

    基于Qt实现文件上传功能,包括客户端和服务端源码。

    基于Qt实现文件上传功能:利用QTcpSocket 和QTcpServer 实现的客户端和服务端,采用Qt5.9.9编写,可以实现大文件上传至服务端的功能,详情参考博客:https://blog.csdn.net/m0_37251750/article/details/122192672

    java实现Socket方式文件批量传输/上传到服务器(awt界面)

    java实现Socket方式文件批量传输/上传到服务器(awt界面),主要功能包括: ...1.awt上传管理文件界面,提供applet嵌入jsp文件实现 2.Socket实现文件批量上传到SocketServer服务器 3.提供applet嵌入进jsp页面

    asp.net Uploadify 多文件上传 Jquery 多文件上传 Jquery+flash 多文件上传

    Jquery 多文件上传,jquery+flash 多文件上传,界面美观, 很炫的上传组件,支持中文! 本实例经过严格测试,保证能正常使用!网上其他好多实例都不能正常运行。 uploadify是一款容量小、功能强的Js批量上传工具,...

    GTK+图形界面开发

    GTK+是一个多平台的自由软件GUI工具包,起初是为X ...GTK+安装了开发图形用户界面所需的库,它是一个基于C的面向对象的结构体系,拥有最大的灵活性,支持GIMP的X图形函数标准,同时提供了公用的函数供开发者使用。

Global site tag (gtag.js) - Google Analytics