<%@ 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. form submission

    https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms This module provides a series of articles ...

  2. P3956棋盘

    传送 这看起来有点像个搜索,那我们就用搜索试试. dfs?bfs? 其实都可以,但是窝只会dfs.. 既然这里要用dfs,那么就要把每次搜到(m,m)时,使用的金币数量进行比较,取最小值. 在搜索过程 ...

  3. 004-URL编码转换函数：escape()、encodeURI()、encodeURIComponent()

    一.概述 函数出现时间:                     escape()                                javascript 1.0             ...

  4. 使用python执行sql语句和外键解析

    一.下载并导入pymysql pip install pymysql && import pymysql db=pymysql.connect(host=) #如果报错host大概率因 ...

  5. Jmeter接口自动化培训

    课程前提 速成班,讲的不会非常深,每个人基础不一样,但是实现接口自动化没有问题,因为jmeter更多的用来做性能测试.当然有兴趣我们也可以穿插一点 课程基本大纲 接口基础概念 部署本地测试环境(使用d ...

  6. 剑指offer第二版面试题5：从尾到头打印链表（JAVA版）

    题目描述: 输入一个链表,从尾到头打印链表每个节点的值.返回新链表. import java.util.Stack; //定义链表结构 class ListNode { int value; List ...

  7. 推荐使用MarkdownPad2进行Markdown写作

    笔者更推荐使用notepad++写markdown Atom也有Bug,还是Visual Studio Code好用. 去官网下载MarkdownPad2的安装包,并安装之. 如果你是Windows ...

  8. Pikachu漏洞练习平台实验——文件包含（File Inclusion）（六）

    1.概述 1.1简介 在 Web 后台开发中,程序员往往为了提高效率以及让代码看起来更加简洁,会使用 “包含” 函数功能.比如把一系列功能函数都写进 function.php 中,之后当某个文件需要调 ...

  9. 简单的C++11线程池实现

    线程池的C++11简单实现,源代码来自Github上作者progschj,地址为:A simple C++11 Thread Pool implementation,具体博客可以参见Jakob's D ...

  10. 学习ECMAScript标准和具体实现-JavaScript

    在NDN的JavaScript Guide里,Array和Map,Set都属于collections of data.它们的区别就是,Array是ordered by an index value,  ...