<%@ 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. P1970花匠

    传送 首先,这道题据说是一个dp 其次,贪心就能做 我们先来看好想好写的贪心 按照题目来,所有偶数点要么都是凸的,要么都是凹的,不能有凸有凹.我们把每株花的高度都在平面直角坐标系中点出来,再连线.这样 ...

  2. rssi pdf 单双峰正态发布 与 定位

  3. Git是目前世界上最先进的分布式版本控制系统（没有之一）。

    http://zhidao.baidu.com/link?url=NSYPiSvtGTMoqMA9vt68FRRF8WbfYVmwWeMh47_2lkp0K3jFMl--1Co1tg1R4VshTQV ...

  4. Windows 下手工搭建 LNMP 环境

    参考资料 如果想方便,可以直接使用集成的 LNMP 环境(例如 PHPStudy). 下载 PHP 下载地址:https://windows.php.net/download 根据你的系统选择 32 ...

  5. 【PP系列】SAP 取消报工后修改日期

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[PP系列]SAP 取消报工后修改日期   前言 ...

  6. mysql 主从复制 （2）

    今天说一下MySQL的主从复制如何做到! 准备工作: 1.两个虚拟机:我这里用的是CentOS5.5,IP地址分别是192.168.1.101 和192.168.1.105: 101做主服务器,105 ...

  7. dp（最长公共上升子序列）

    This is a problem from ZOJ 2432.To make it easyer,you just need output the length of the subsequence ...

  8. BZOJ 1912（树的直径+LCA)

    题面 传送门 分析 显然,如果不加边,每条边都要走2次,总答案为2(n-1) 考虑k=1的朴素情况: 加一条边(a,b),这条边和树上a->b的路径形成一个环,这个环上的边只需要走一遍,所以答案 ...

  9. mongodb的有关操作

    mongodb的几种启动方法 https://www.cnblogs.com/LLBFWH/articles/11013791.html MongoDB 之 你得知道MongoDB是个什么鬼 Mong ...

  10. Leetcode Lect2 Java 中的 Interface

    什么是 Interface Java接口(Interface)是一系列方法的声明,是一些方法特征的集合,一个接口只有方法的特征没有方法的实现,因此这些方法可以在不同的地方被不同的类实现,而这些实现可以 ...