<%@ 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. Windows 环境下vue+webpack前端开发环境搭建

    一.开发环境搭建 1.前端框架一般依赖node.js,我们首先要安装node.js. 2.由于许多npm 的源都在国外的地址,安装起来特别慢,所以我们这里利用淘宝的镜像服务器. 安装命令为:npm i ...

  2. 1.安装TypeScrpit

    https://www.tslang.cn/index.html 1.vs安装 之前网上的查的安装方法是先安装nodejs,之后执行 npm install -g typescript 但是从官网的下 ...

  3. Delphi 文件转换Base64

    uses EncdDecd; function FileToBase64(FileName: string): string; var  MemoryStream: TMemoryStream;beg ...

  4. Nginx 模块 - ngx_core_module

    原文地址 示例配置 指令 accept_mutex accept_mutex_delay daemon debug_connection debug_points env error_log even ...

  5. mybatis中Oracle分页语句的写法

    最近一段时间使用oracle数据库查询分页, 用的是springboot. Oracle数据库中没有像mysql中limit的写法, 只能换其他方式写. 考虑到oracle中的ROWNUM变量, 使用 ...

  6. 通过Samba练习metasploit的使用

    文章学习利用metasploit通过Samba3.X获取metasploitable2的shell,从而去熟悉metasploit的使用. 环境: kali IP:192.168.137.133 me ...

  7. for in 和for of的区别

    for in 和for of的区别:https://www.jianshu.com/p/c43f418d6bf0 1 遍历数组通常用for循环 ES5的话也可以使用forEach,ES5具有遍历数组功 ...

  8. form-control的作用

    表单控件加上类form-control后,效果为: 宽度为100% 设置边框为浅灰色 控件具有4px的圆角 设置阴影效果,元素得到焦点时,阴影和边框效果会发生变化 设置placeholder的颜色为# ...

  9. 牛逼哄哄的 API 网关是什么鬼？面试必问！

    Java技术栈 www.javastack.cn 优秀的Java技术公众号 作者:aCoder2013 github.com/aCoder2013/blog/issues/35 前言 假设你正在开发一 ...

  10. [Codeforces 163D]Large Refrigerator (DFS+剪枝)

    [Codeforces 163D]Large Refrigerator (DFS+剪枝) 题面 已知一个长方体的体积为V,三边长a,b,c均为正整数,求长方体的最小表面积S V以质因数分解的形式给出 ...