在大多数的邮箱和博客中都有上传文件这一功能，他们的实现了上传文件之后再上传文件的下面产生一个列表用于展示应经上传成功的文件列表，并且后面带有删除，编辑或者下载等功能。
下面这段代码实现了，上传文件之后产生文件列表用于展示上传的文件。
<%@ 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 表示的链接。顺便还有一个就是拿到链接之后怎么获取的该链接的节点
相关推荐
这个"多文件批量上传界面漂亮"的项目，显然关注的是提供一个美观且高效的文件上传体验。以下将详细介绍相关知识点： 1. **多文件上传**：传统的HTML表单仅支持单个文件的上传，但通过HTML5的`...
java Swing 上传文件-------------------------------------------------------------------------------------------------------------------------------------------------------
它以其简洁的界面和强大的功能深受开发者喜爱，可以方便地在网页中创建优雅的多文件上传界面。下面我们将深入探讨 `jQuery Uploadify` 的核心知识点和实现原理。 ### 1. jQuery 基础 `jQuery` 是一个快速、简洁的 ...
而且，FinalShell支持文件拖拽上传，只需将本地文件拖入窗口，即可快速完成文件传输，这种操作方式既直观又快捷。 其次，FinalShell拥有汉化界面，对于中文用户来说非常友好。软件的所有菜单、选项和提示都采用中文...
利用java图形化界面和网络编程相结合实现的--文件上传。 运行步骤： （1）分别运行工程两个包中的两个.java文件（UploadClient.java和UploadServer.java）分别会弹出“上传客服端”和“上传服务器”两个窗口。 ...
4. **文件上传安全**：在实现多文件上传时，要考虑到文件大小限制、文件类型检查、防止跨站脚本攻击（XSS）和跨站请求伪造（CSRF）等安全问题。 5. **用户体验优化**：设计良好的用户界面和交互，如进度条展示、...
首先，我们要理解“Flex作为上传文件界面”。Flex使用ActionScript编程语言，基于MXML进行UI布局，可以创建动态、响应式的Web应用程序。在文件上传场景中，Flex可以设计一个包含文件选择按钮和进度条的界面，用户...
利用java图形化界面和网络编程相结合实现的--文件上传。 运行步骤： （1）分别运行工程两个包中的两个.java文件（UploadClient.java和UploadServer.java）分别会弹出“上传客服端”和“上传服务器”两个窗口。 ...
在这个场景中，我们讨论的是使用Java Socket实现一个无界面的文件上传功能，即客户端将文件发送到服务器，服务器接收并存储文件。下面将详细阐述这个过程中的关键知识点。 1. **Socket编程基础**： Java Socket ...
【jQuery css3文件上传动画界面代码】是一种利用JavaScript库jQuery和CSS3技术实现的现代、交互式的文件上传组件。在当前互联网应用中，用户界面的交互性和视觉效果越来越受到重视，文件上传作为常见的功能之一，其...
使用ecplise打开即可，upload.jsp是上传文件界面，show.jsp中可以下载文件,相关的java代码在src目录下，很简单不多说，可运行。上传的文件可以在tomcat下的wtpwebapps下的files文件夹中看到。（注意：每一次重新部署...
- 文件上传可能涉及到文件的二进制读取、文件流的处理以及网络传输中的分块上传策略，以适应大文件传输。 - 服务器端需要处理文件接收、存储和管理，可能包括文件验证、权限控制等。 6. **事件驱动编程**： - ...
"C#界面美化文件" 提供了一种资源，用于帮助开发者快速、便捷地为他们的应用创建美观的用户界面。SSK（Skin Soft Keyboard）格式是一种专门用于存储界面皮肤的文件格式，它允许用户自定义控件的外观和感觉，使得软件...
它通常与其他控件（如`datagrid`）配合使用，以便于在界面上完成文件的上传等操作。本文将重点介绍`filebox`控件的配置、文件的异步上传以及如何在保存记录时处理上传文件的相关逻辑。 #### 三、filebox控件使用...
本知识点将详细介绍如何利用C#的WinForm界面和HTTP协议来实现文件上传功能。 首先，理解WinForm。WinForm是.NET Framework提供的一种用于构建桌面应用程序的用户界面框架。它提供了丰富的控件库，如按钮、文本框、...
在这个场景下，"批量上传文件带进度条"主要涉及的技术点有Java编程语言、多线程、FTP文件传输协议以及用户界面（UI）的设计。 首先，Java是实现这个功能的主要编程语言。Java以其跨平台性和丰富的类库而被广泛使用...
SWF提供了高度可定制的工作流界面，与EXT集成可以创建出美观且功能强大的文件上传界面。SWF的工作流定义可以描述文件上传的整个流程，包括用户界面、业务逻辑和数据处理。通过定义SWF工作流，你可以控制用户在上传...
综上所述，这个前端模板是一个基于Bootstrap的全能解决方案，涵盖了数据操作、文件上传和权限管理等多个重要功能，同时还注重界面设计和用户体验。对于前端开发者来说，它提供了一个快速启动项目的基础，减少了从零...
"带进度条的文件上传，附带显示上传文件的列表，并且能删除已上传文件"这一主题，涉及的技术点主要包括前端交互设计、文件处理、异步传输、进度反馈和用户界面(UI)管理。 1. **前端交互设计**：这部分主要关注用户...
在FineReport中实现文件上传到数据库和下载的过程涉及多个技术环节，包括数据库设计、文件的二进制处理、报表模板的制作、以及前端界面的操作等。以下是对这一过程中所涉及知识点的详细说明。 首先，我们要了解在...