<%@ 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. 1208C Magic Grid

    题目大意 给你一个n 让你用0~n^2-1的数填满一个n*n的正方形 满足每个数值出现一次且每行每列的异或值相等 输出任意一种方案 分析 我们发现对于4*4的正方形 0  1  2  3 4  5  ...

  2. 牛客提高D5t1 deco的abs

    分析 傻子题? 对d取模后随便贪心即可 代码 #include<iostream> #include<cstdio> #include<cstring> #incl ...

  3. python web自动化测试框架搭建(功能&接口)——接口测试模块

    Python接口测试采用python读取excel的方法,通过requests库发送请求和接收响应.模块有: Data:用于存放excel用例的,用例格式: iutil: 接口公共方法,数据引擎.ht ...

  4. SqlServer 2012 AlwaysOn

    第一篇http://www.cnblogs.com/lyhabc/p/4678330.html第二篇http://www.cnblogs.com/lyhabc/p/4682028.html第三篇htt ...

  5. ajax基础--基本概念

    1.Ajax的全称: Asynchronous Javascript And XML,就是使用is代码获取服务器数据 局部异步刷新 IP地址:用来标识查找某一台计算机 域名:ip地址太难记了,使用域名 ...

  6. GD Library extension not available

    在后台文章上传封面时,遇到了这样一个错误 GD Library extension not available with this PHP installation Ubuntu Nginx 自己在本 ...

  7. git不能先commit后再pull

    本文首发hilsion的博客 今天遇到一个在使用git上的一个误区.具体的问题现象是: 我commit后再pull而不能在本地合并的情况,结果导致我的commit直接把同事的修改覆盖了.因为相对于我此 ...

  8. Jmeter中Bean shell脚本格式修改为utf-8

    遇到的问题: 在做 一个发贴的接口测试时发现,发送数字+纯字母贴子时,可以正常请求成功.但当贴内容为中文时,服务端编码为乱码??. 原因: jmeter中,shell脚本的默认的格式为GBK,所以我在 ...

  9. Linux筛选数据

    grep命令:在文件中查找关键字,并显示所在行(Globally search a Regular Expression and Print) grep text file:在file文件中搜索tex ...

  10. 【转】 关于form与表单提交操作的一切

    参考一:http://caibaojian.com/form.html 参考二:https://blog.csdn.net/weixin_42301628/article/details/867156 ...