使用JS实现页面中动态添加文件上传输入项
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实现页面中动态添加文件上传输入项的更多相关文章
- ajaxFileUpload+struts2实现多文件上传(动态添加文件上传框)
上篇文章http://blog.csdn.net/itmyhome1990/article/details/36396291介绍了ajaxfileupload实现多文件上传, 但只是固定的文件个数,如 ...
- ajaxFileUpload+struts2多文件上传(动态添加文件上传框)
上一篇文章http://blog.csdn.net/itmyhome1990/article/details/36396291介绍了ajaxfileupload实现多文件上传, 但仅仅是固定的文件个数 ...
- ASP.NET 中对大文件上传的简单处理
在 ASP.NET 开发的过程中,文件上传往往使用自带的 FileUpload 控件,可是用过的人都知道,这个控件的局限性十分大,最大的问题就在于上传大文件时让开发者尤为的头疼,而且,上传时无法方便的 ...
- Resumable.js – 基于 HTML5 File API 的文件上传
Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...
- Spring中MultipartHttpServletRequest实现文件上传
Spring中MultipartHttpServletRequest实现文件上传 转贴自:http://my.oschina.net/nyniuch/blog/185266 实现图片上传 用户必须能 ...
- Node.js 博客实例（三）添加文件上传功能
原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第三章 上传文件眼下有三种方法: 使用 Express 自带的文件上传功能,不涉及数据库 使用 For ...
- struts2解决动态多文件上传的问题（上传文件与数据库字段一一对应)(转)
struts2多文件上传我想只要会用struts2的朋友都不会陌生,但是怎么在action中根据用户上传的文 件把文件路径写到数据库中对应的字段上呢?ps:我的意思是这样,页面上有固定的5个上传文件的 ...
- struts2中简单的文件上传
2016-08-31 一. 文件上传 利用commons-fileupload-1.2.1.jar实现简单的上传文件,首先在页面上填写表单,记得加上enctype="multip ...
- SSM-SpringMVC-32：SpringMVC中灌顶传授文件上传
------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 我将用自认为最简单的语言,描述Springmvc的文件上传,来将老夫毕生功力灌顶传授给你 首先文件上传,又简至 ...
随机推荐
- DLL注入技术之依赖可信进程注入
DLL注入技术之依赖可信进程注入 依赖可信进程注入原理是利用Windows 系统中Services.exe这个权限较高的进程,首先将a.dll远线程注入到Services.exe中,再利用a.dll将 ...
- 暴力”注入Explorer
暴力"注入Explorer pjf(jfpan20000@sina.com) 向一个运行中的进程注入自己的代码,最自然莫过于使用Cr ...
- TCP之1460MSS和1448负载
TCP和1448 1448字节是实际场景下,单个TCP包的实际运载能力.也就是说,实际场景下,上层调用send(1000KB),下层会把这1000KB封装成多个TCP包进行发送.单个TCP包每次打包1 ...
- debian 源设置 （ apt-get 不能安装）
使用说明 以Jessie为例, 编辑/etc/apt/sources.list文件, 在文件最前面添加以下条目(操作前请做好相应备份) deb http://mirrors.163.com/debia ...
- CodeForces-1234C-Pipes-dfs
You are given a system of pipes. It consists of two rows, each row consists of nn pipes. The top lef ...
- PAT_A1079#Total Sales of Supply Chain
Source: PAT A1079 Total Sales of Supply Chain (25 分) Description: A supply chain is a network of ret ...
- PAT_A1094#The Largest Generation
Source: PAT A1094 The Largest Generation (25 分) Description: A family hierarchy is usually presented ...
- pandas 使用dataframe 索引项相同时出现bug
使用的是join函数来合并两个dataframe: df=df2.join(df1) bug:columns overlap but no suffix specified: Index([u'muk ...
- Bootstrap3的响应式缩略图幻灯轮播效果设计
在线演示1 本地下载 HTML <div class="container"> <div class="col-md-12"> &l ...
- web前端好书推荐 CSS权威指南《第3版,Bootstrap实战,精通CSS 高级Web标准解决方案 第2版 中文
在我的新博客中==> http://www.suanliutudousi.com/2017/08/24/web%E5%89%8D%E7%AB%AF%E5%A5%BD%E4%B9%A6%E6%8E ...