使用JS实现页面中动态添加文件上传输入项

1. 编写JSP

 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 3 <html>
 4 <head>
 5     <title>My JSP ‘upload2.jsp‘ starting page</title>
 6     <script type="text/javascript“ src="js/test.js"></script>
 7 </head>
 8 <body>
 9     <table>
10         <tr>
11             <td>上传用户:</td>
12             <td><input type="text" name="username"></td>
13         </tr>
14         <tr>
15             <td>上传文件:</td>
16             <td><input type="button" value="添加上传文件" onclick="addinput()"></td>
17         </tr>
18         <tr>
19             <td></td>
20             <td>
21                 <div id="file">
22
23                 </div>
24             </td>
25         </tr>
26     </table>
27 </body>
28 </html>

2. 编写JavaScript

test.js

 1 function addinput(){
 2     var div = document.getElementById("file");
 3
 4     var input = document.createElement("input");
 5     input.type="file";
 6     input.name="filename";
 7
 8     var del = document.createElement("input");
 9     del.type="button";
10     del.value="删除";
11     del.onclick = function d(){
12         this.parentNode.parentNode.removeChild(this.parentNode);
13     }
14
15
16     var innerdiv = document.createElement("div");
17
18
19     innerdiv.appendChild(input);
20     innerdiv.appendChild(del);
21
22     div.appendChild(innerdiv);
23 }

3. 效果演示

原文地址:https://www.cnblogs.com/shaohsiung/p/9537349.html

时间: 2024-12-12 19:31:56

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

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

上篇文章http://blog.csdn.net/itmyhome1990/article/details/36396291介绍了ajaxfileupload实现多文件上传, 但只是固定的文件个数,如果需求不确定是多少文件 则我们就需要动态的添加文件上传框,以实现灵活性. 基于上篇基本框架是不变的,主要修改以下几个方面 1.jQuery实现动态添加删除文件上传框 2.获取文件上传框的ID 3.ajaxfileupload.js里将ID数组转换为需要的Object数组 依次解决上面问题 一.实现动

js动态添加文件上传框

页面元素添加为 <tr id="att" style="display:none;"> <td style="text-align:right;">附件文件:</td> <td> <div id="div_fujian"> <div class="input-outer"><input type="file"

SpringMVC中的多文件上传

这是用的是SpringMVC-3.1.1.commons-fileupload-1.2.2和io-2.0.1 首先是web.xml <?xml version="1.0" encoding="UTF-8"?>   <web-app version="2.5"        xmlns="http://java.sun.com/xml/ns/javaee"        xmlns:xsi="http

【PHP原生】动态多文件上传并将路径存储在数据库

动态多文件上传并将路径存储在数据库 1.上传页面index.html <!DOCTYPE html > <html> <head> <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/> <title>多图片上传</title> <script> //全局变量,代表文件域的个数,并用该变量区分文件域的nam

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

ASP.NET 中对大文件上传的简单处理 在 ASP.NET 开发的过程中,文件上传往往使用自带的 FileUpload 控件,可是用过的人都知道,这个控件的局限性十分大,最大的问题就在于上传大文件时让开发者尤为的头疼,而且,上传时无法方便的做到多线程的操控和上传进度的显示.笔者在此给大家推荐一款简单易用的上传组件,从而快速便捷得解决了 ASP.NET 中的大文件上传问题. 首先,我们需要下载这个名为 RanUpLoad 的组件,可以去我的百度云盘下载: http://pan.baidu.com

gitlab使用过程中遇到大文件上传或下载失败的问题,总结一下

环境如下:gitlab服务器redhat,客户端环境mac os,如果是其他环境遇到问题仅供参考 如果gitlab上传代码提示: error: RPC failed; result=22, HTTP code = 411 该问题是由于客户端设置的http_post_buffer大小不足导致的,解决方法如下: 进入到工程所在的终端目录下执行: git config http.postBuffer 524288000 如果gitlab上传代码提示: error: RPC failed; result

Spring中MultipartHttpServletRequest实现文件上传

Spring中MultipartHttpServletRequest实现文件上传 转贴自:http://my.oschina.net/nyniuch/blog/185266 实现图片上传  用户必须能够上传图片,因此需要文件上传的功能.比较常见的文件上传组件有Commons FileUpload(http://jakarta.apache.org/commons/fileupload/a>)和COS FileUpload(http://www.servlets.com/cos),spring已经

js在页面中嵌入pdf文件

由于项目需求,需要在jsp页面中嵌入PDF文件,在网上搜了很多方法,大部分是用<object>标签钱嵌入,发现并不好用. 这里介绍一个很好用的插件,PDFObject  https://pdfobject.com/ 由于用的是框架,所以我直接把pdfobjects.js的代码复制到了项目中,按照上面说的方法成功插入了pdf.

Node.js 博客实例(三)添加文件上传功能

原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第三章 上传文件眼下有三种方法: 使用 Express 自带的文件上传功能,不涉及数据库 使用 Formidable 外部模块,不涉及数据库 上传到 MongoDB ,涉及数据库 这里使用第一种,用户将文件上,存储于:blog/public/images/文件夹下. blog/views/header.ejs  在<span><a title="发表" href=&quo