1. 编写JSP

 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 <html>

 <head>

     <title>My JSP 'upload2.jsp' starting page</title>

     <script type="text/javascript“ src="js/test.js"></script>

 </head>

 <body>

     <table>

         <tr>

             <td>上传用户：</td>

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

         </tr>

         <tr>

             <td>上传文件：</td>

             <td><input type="button" value="添加上传文件" onclick="addinput()"></td>

         </tr>

         <tr>

             <td></td>

             <td>

                 <div id="file">

                 </div>

             </td>

         </tr>

     </table>

 </body>

 </html>

2. 编写JavaScript

test.js

 function addinput(){

     var div = document.getElementById("file");

     var input = document.createElement("input");

     input.type="file";

     input.name="filename";

     var del = document.createElement("input");

     del.type="button";

     del.value="删除";

     del.onclick = function d(){

         this.parentNode.parentNode.removeChild(this.parentNode);

     }

     var innerdiv = document.createElement("div");

     innerdiv.appendChild(input);

     innerdiv.appendChild(del);

     div.appendChild(innerdiv);

 }

3. 效果演示

使用JS实现页面中动态添加文件上传输入项的更多相关文章

  1. ajaxFileUpload+struts2实现多文件上传(动态添加文件上传框)

    上篇文章http://blog.csdn.net/itmyhome1990/article/details/36396291介绍了ajaxfileupload实现多文件上传, 但只是固定的文件个数,如 ...

  2. ajaxFileUpload+struts2多文件上传(动态添加文件上传框)

    上一篇文章http://blog.csdn.net/itmyhome1990/article/details/36396291介绍了ajaxfileupload实现多文件上传, 但仅仅是固定的文件个数 ...

  3. ASP.NET 中对大文件上传的简单处理

    在 ASP.NET 开发的过程中,文件上传往往使用自带的 FileUpload 控件,可是用过的人都知道,这个控件的局限性十分大,最大的问题就在于上传大文件时让开发者尤为的头疼,而且,上传时无法方便的 ...

  4. Resumable.js – 基于 HTML5 File API 的文件上传

    Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...

  5. Spring中MultipartHttpServletRequest实现文件上传

    Spring中MultipartHttpServletRequest实现文件上传 转贴自:http://my.oschina.net/nyniuch/blog/185266 实现图片上传  用户必须能 ...

  6. Node.js 博客实例（三）添加文件上传功能

    原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第三章 上传文件眼下有三种方法: 使用 Express 自带的文件上传功能,不涉及数据库 使用 For ...

  7. struts2解决动态多文件上传的问题（上传文件与数据库字段一一对应)(转)

    struts2多文件上传我想只要会用struts2的朋友都不会陌生,但是怎么在action中根据用户上传的文 件把文件路径写到数据库中对应的字段上呢?ps:我的意思是这样,页面上有固定的5个上传文件的 ...

  8. struts2中简单的文件上传

    2016-08-31 一.       文件上传 利用commons-fileupload-1.2.1.jar实现简单的上传文件,首先在页面上填写表单,记得加上enctype="multip ...

  9. SSM-SpringMVC-32：SpringMVC中灌顶传授文件上传

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 我将用自认为最简单的语言,描述Springmvc的文件上传,来将老夫毕生功力灌顶传授给你 首先文件上传,又简至 ...

随机推荐

  1. Typora--终于找到一个能够解决将csdn文章同步到hexo的完美编辑器（解决csdn图片防盗链导致无法直接复制文章的问题）。

    文章目录 需求 背景 新宠 告诉我,我的名字叫什么?大声点我听不见~ 页面 神奇之处 看得见的优点 如何设置项目根目录 如何显示图片? 于是最终操作流程 个人博客:https://mmmmmm.me ...

  2. MySQL数据库中，使用 group by 时，不重复字段如何拼接显示

    就不写文字描述了,直接用图和sql来表述吧. 这是测试数据,表名为 person 现在,我想按照性别进行分组,也就是字段 sex ,同时能将分组后的姓名全部显示出来. sql 语句如下: SELECT ...

  3. Reverses CodeForces - 906E （最小回文分解）

    题意: 给你两个串s和t,其中t是由s中选择若干个不相交的区间翻转得到的,现在要求求出最少的翻转次数以及给出方案. 1≤|s|=|t|≤500000 题解: 我们将两个字符串合成成T=s1t1s2t2 ...

  4. iOS开发系列-Foundation与CoreFoundation内存管理

    概述 对于初学者来说,可能仅只能将ARC用在objective-c对象上(也即继承自NSObject的对象),但是如果涉及到较为底层的东西,比如Core Foundation中的malloc()或者f ...

  5. shell 命令 用户管理

     1. 查看保存用户相关信息的文件 [ cat /etc/passwd ]  [linux    :    x    :   1000  :   1000   :   linux,,,   :    ...

  6. 使用<script>标签在HTML网页中插入JavaScript代码

    新朋友你在哪里(如何插入JS) 我们来看看如何写入JS代码?你只需一步操作,使用<script>标签在HTML网页中插入JavaScript代码.注意, <script>标签要 ...

  7. virtualbox启动虚机报错：The VM session was closed before any attempt to power it on.

    解决方法:   image.png 点击清除即可. 或者在控制>清除保存的状态.然后重启虚机即可!

  8. mysql 主从笔记

    主库配置 一.修改主库配置文件 开启binlog,并设置server-id,每次修改配置文件后都要重启mysql服务才会生效 server-id = log-bin = mysql-bin binlo ...

  9. C/C++ Microsoft Visual Studio c++ DOC Home

    { // https://docs.microsoft.com/zh-cn/cpp/overview/visual-cpp-in-visual-studio?view=vs-2017 // https ...

  10. Mysql保留字列表

      Mysql保留字列表.吠品整理. 尝试使用一个识别符,例如使用嵌入式MySQL 数据类型或函数名作为表名或列名,例如TIMESTAMP 或GROUP,会造成一个常见问题.允许你这样操作( 例如,A ...