<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script type="text/javascript" src="${pageContext.request.contextPath }/scripts/jquery-1.7.2.js"></script>

<script type="text/javascript">

    $(function(){

        var i = 2;

        //获取#addFile,并为其添加click响应函数。

        $("#addFile").click(function(){
　　　　//当前节点（<td>）的父节点（<tr>）加上文本域。
　　　　//before就是在什么的前加上什么。
　　　　　　　　 $(this).parent().parent().before("<tr class='file'><td>File"

                    + i + ":</td><td><input type='file' name='file"

                    + i + "'/></td></tr>"

                    + "<tr class='desc'><td>Desc"

                    + i + ":</td><td><input type='text' name='desc"

                    + i + "'/><button id='delete"

                    + i + "'>删除</button></td></tr>");

            i++;

            //获取新添加的删除按钮

            $("#delete" + (i-1)).click(function(){
　　　　　　　　　//$(this)表示当前节点<button>。的父节点<td>的父节点<tr>

                var $tr = $(this).parent().parent();

                $tr.prev("tr").remove();

                $tr.remove();

                //对 i 重写排序

                $(".file").each(function(index){

                    var n = index + 1;

                    //td:first   表示<td>节点的第一个节点。

                    $(this).find("td:first").text("File" + n);

                    $(this).find("td:last input").attr("name", "file" + n);

                });

                $(".desc").each(function(index){

                    var n = index + 1;

                    $(this).find("td:first").text("Desc" + n);

                    $(this).find("td:last input").attr("name", "desc" + n);

                });

                i = i - 1;

            });

            return false;

        });

    });

</script>

</head>

<body>

    <font color="red">${message }</font>

    <br><br>

    <form action="fileuploadservlet" method="post" enctype="multipart/form-data">

        <table>

            <tr class="file">

                <td>File1:</td>

                <td><input type="file" name="file1"/></td>

            </tr>

            <tr class="desc">

                <td>Desc1:</td>

                <td><input type="text" name="desc1"/></td>

            </tr>

            <tr>

                <td><input type="submit" id="submit" value="提交"/></td>

                <td><button id="addFile">新增一个附件</button></td>

            </tr>

        </table>

    </form>

</body>

</html>

fileupload组件之上传与下载的页面的更多相关文章

  1. JavaWeb之上传与下载

    文件上传概述: 1,文件上传对页面的要求: 必须使用表单,而不能是超链接 表单的method必须是post 表单的enctype必须是multipart/form-data 在表单中添加file表单字 ...

  2. 利用struts2进行单个文件，批量文件上传，ajax异步上传以及下载

    利用struts2进行单个文件,批量文件上传,ajax异步上传以及下载 1.页面显示代码 <%@ page language="java" import="java ...

  3. .JavaWeb文件上传和FileUpload组件使用

    .JavaWeb文件上传 1.自定义上传 文件上传时的表单设计要符合文件提交的方式: 1.提交方式:post 2.表单中有文件上传的表单项:<input type="file" ...

  4. common-fileupload组件实现java文件上传和下载

    简介:文件上传和下载是java web中常见的操作,文件上传主要是将文件通过IO流传放到服务器的某一个特定的文件夹下,而文件下载则是与文件上传相反,将文件从服务器的特定的文件夹下的文件通过IO流下载到 ...

  5. 使用 fileupload 组件完成文件的上传应用

    1. 使用 fileupload 组件完成文件的上传应用 commons-dbutils-1.3.jarcommons-fileupload-1.2.1.jar 1). 需求: > 在 uplo ...

  6. 模拟文件上传（三）：使用apache fileupload组件进行文件批量上传

    其中涉及到的jar包 jsp显示层: <%@ page language="java" import="java.util.*" pageEncoding ...

  7. 模拟文件上传（二）：使用apache fileupload组件进行文件上传

    其中涉及到的jar包: jsp显示层: <%@ page language="java" import="java.util.*" pageEncodin ...

  8. SpringMVC 实现文件上传与下载，并配置异常页面

    目录 上传文件的表单要求 Spring MVC实现上传文件 需要导入的jar包 配置MultipartResolver解析器 编写接收上传文件的控制器 Spring MVC实现文件下载 下载文件时的h ...

  9. 文件上传使用FileUpload组件进行代码实现

    使用FileUpload组件进行代码实现 实现步骤 1. 获取解析器工厂: DiskFileItemFactory 2. 获取解析器对象: ServletFileUpload 3. 解析request ...

随机推荐

  1. WingIIDE 6的licese破解方法(支持python3)

    (1) 安装WingIDE成功后启动,激活时输入license id CN123-12345-12345-12345 (2)点击Continue后弹框,拷贝框中的request code(将其放入脚本 ...

  2. 【GDAL】聊聊GDAL的数据模型(二)——Band对象

    在GDAL中栅格数据直接参与各种计算的重要对象是Band 摘录官方描述: Raster Band A raster band is represented in GDAL with the GDALR ...

  3. MongoDB分片配置 优化 不错

    简单注解:mongos 路由进程, 应用程序接入mongos再查询到具体分片,监听端口默认27017config server 路由表服务, 每一台都具有全部chunk的路由信息 shard为数据存储 ...

  4. 【ABAP系列】SAP ABAP模块-memory内存数据传输的例子

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP模块-memor ...

  5. ECG 项目预研

    1. 数据的采集 智能安全帽,流数据,鉴于数据量大,应该是采集到云平台上,然后在云平台上对数据处理,是一种典型的物联网+大数据应用场景,考虑使用AWS或者阿里云,然后搭建Hadoop/Spark 环境 ...

  6. LayUI Table复杂表头实现

    LayUI table官方文档中在介绍复杂表头时的用例仅使用了自动渲染的方式作为参考,而并未用到方法渲染的方式来做用例,这让部分不太熟悉layUI table的开发者会有些头疼,不知道如何在方法渲染中 ...

  7. python------生产者消费者模型 和 管道

    一.为什么要使用生产者和消费者? 在线程世界里,生产者就是生产数据的线程,消费者就是消费数据的线程,在多线程开发当中,如果生产者处理速度很快,而消费者处理速度很慢,那么生产者就必须等待消费者处理完,才 ...

  8. Django学习——开发你的第一个Django应用2

    接着上一节的内容来说.我们将继续关注与上一节制作的polls应用以及Django自动产生额度管理网站. 产生一个管理员用户 首先我们需要产生一个管理员用户,运行如下命令: python manage. ...

  9. vue 实现模糊检索，并根据其他字符的首字母顺序排列

    昨天让我做一个功能,实现一个模糊检索,我就想,那做呗,然后开始正常的开发 代码如下: HTML VUE 因为是实时的,所以写了将逻辑写到了watch中 五分钟搞定.   我以为这就完了,然而产品的需求 ...

  10. vue 移动端列表筛选功能实现

    最近兴趣所致,打算使用vant搭建一个webapp,由于需要使用列表筛选,没有找到合适组件,于是写了一个简单的功能,权当记录. 效果如下:        HTML: <div class=&qu ...