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. c# ToString()格式大全（转）

    stringstr1 =string.Format("{0:N1}",56789);               //result: 56,789.0stringstr2 =str ...

  2. spring boot jpa没有自动生成表的原因——加上@Entity

    别人的项目弄了好久,竟然是忘记加注解,当然配置文件还是要配置jpa的,pom也要依赖jpa. @Entity jpa: hibernate: ddl-auto: update show-sql: tr ...

  3. webpack的devtool

    这里以环境分类为分析方向 1.对开发环境 eval - 每个模块都使用 eval() 执行,并且都有 //@ sourceURL.此选项会非常快地构建.主要缺点是,由于会映射到转换后的代码,而不是映射 ...

  4. Mybatis与Spring整合（CURD）

    项目采用Maven构建,用Junit进行测试,数据库是Mysql,连接池是c3p0,未测试缓存部分 1.Maven的“pom.xml”文件 <project xmlns="http:/ ...

  5. 基于第三方开源库的OPC服务器开发指南（3）——OPC客户端

    本篇将讲解如何编写一个OPC客户端程序测试我们在前文<基于第三方开源库的OPC服务器开发指南(2)——LightOPC的编译及部署>一篇建立的服务器.本指南的目的是熟悉OPC服务器的开发流 ...

  6. python_django_models模块中的查询

    查询集:表示从数据库获取的对象集合,查询集可以有多个过滤器,过滤器就是一个函数(方法),基于所给参数限制查询集结果 从sql角度来说,查询集和select等价,过滤器和where等价 查询集特点: 惰 ...

  7. [转]nginx简易教程

    安装 nginx官网下载地址 发布版本分为 Linux 和 windows 版本. 也可以下载源码,编译后运行. 从源代码编译 Nginx 把源码解压缩之后,在终端里运行如下命令: $ ./confi ...

  8. php curl的正确使用方法

    在做一个读取远程抓取数据并显示的demo的时候,遇到了以下几个问题: 1.用的curl变量进行了多定义 2.抓取远程数据时没有返回正确的json数据 没有返回正确的json数据不是因为网站提供的接口问 ...

  9. 最大流dicnic——hdu1532模板题

    #include<bits/stdc++.h> using namespace std; #define maxn 1005 #define ll long long const ll i ...

  10. hdu多校第一场 1013（hdu6590）Code 凸包交

    题意: 给定一组(x1,x2,y),其中y为1或0,问是否有一组(w1,w2,b),使得上述的每一个(x1,x2,y)都满足x1*w1+x2*w2+b在y=1时大于0,在y=-1时小于0. 题解: 赛 ...