js实现动态添加上传文件页面

发邮件是需要添加一些文件，每添加一个文件，页面上可以显示一个表单文件上传选项。

此功能为：初始时刻只有一个添加按钮，当点击添加文件时，会增加一个选择文件和删除区域，同时显示上传按钮，当点击删除，此行选择文件行消失，当所有选择文件项都消失时，上传按钮将被隐藏起来。下面是实例代码：

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

 <title>动态添加文件上传列表</title>
 <script type="text/javascript">
  var num=0;
  function addFile(event){
  //创建一个div标签，用以包含一个input标签和删除按钮
  var innerdiv = document.createElement("div");

  //创建一个input标签
  var inputNode = document.createElement("input");
  inputNode.name = "fileName";
  inputNode.type="file";

  //创建一个删除按钮
  var delNode = document.createElement("input");
  delNode.name = "del";
  delNode.type = "button";
  delNode.value="删除";

  var submit = document.getElementById("submit");

  //删除当前删除按钮所在的标签,为此按钮点击事件创建一个处理函数
  delNode.onclick = function d(){
  this.parentNode.parentNode.removeChild(this.parentNode); //删除此div区域
  var fileNodes = document.getElementsByName("fileName");
  //当没有上传文件时，隐藏submit按钮
  if(fileNodes.length==0){
  submit.style.display="none";
  }
  };

  innerdiv.appendChild(inputNode);
  innerdiv.appendChild(delNode);

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

  submit.style.display="block";

  }
 </script>

 </head>

 <body>
 <form id="upload" action="${pageContext.request.contextPath }/servlet/FileUploadServlet" enctype="multipart/form-data" method="post">
  上传文件:<input type="button" value="添加文件" onclick="addFile(this.parentNode)"/> <br />
  <table>
  <div id="file">

  </div>
  </table>
  <input id="submit" type="submit" value="上传" style="display: none"/>
 </form>
 </body>
</html>

此实例代码中，addFile将动态增加一个div区域，div区域包含一个file input标签和删除按钮。

动态创建一个input标签示例：

//创建一个div标签，用以包含一个input标签和删除按钮
 var innerdiv = document.createElement("div");

//创建一个input标签
 var inputNode = document.createElement("input");
 inputNode.name = "fileName";
 inputNode.type="file";
 innerdiv.appendChild(inputNode);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Thinkjs3新手入门之添加一个新的页面

    Thinkjs3新手入门之添加一个新的页面

    前言 ThinkJS 是一款拥抱未来的 Node.js Web 框架,致力于集成项目最佳实践,规范项目让企业级团队开发变得更加简单,更加高效. 目前该版本已经在线上多个项目中使用,简单一个命令就可以让你下载使用它: npm install -g think-cli 本文将帮助大家往Thinkjs3中添加一个新的页面,没有原理描述,只提供给入门者一个感性认识. 0x0 首先需要一个Thinkjs3项目 我们创建一个叫做1uck的项目 $ thinkjs new 1uck $ cd ./1uck $

  • JS动态添加的div点击跳转到另一页面实现代码

    div调用函数跳转: var obj = document.getElementById('id'); obj.onclick=function(){ window.location.href="跳转的地址" rel="external nofollow" ; } 源文件: <!DOCTYPE html> <html> <head> <title>首页推荐页面</title> <meta name=&

  • js实现动态添加上传文件页面

    js实现动态添加上传文件页面

    发邮件是需要添加一些文件,每添加一个文件,页面上可以显示一个表单文件上传选项. 此功能为:初始时刻只有一个添加按钮,当点击添加文件时,会增加一个选择文件和删除区域,同时显示上传按钮,当点击删除,此行选择文件行消失,当所有选择文件项都消失时,上传按钮将被隐藏起来.下面是实例代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title

  • JS中使用FormData上传文件、图片的方法

    关于FormData XMLHttpRequest Level 2添加了一个新的接口  ---- FormData 利用FormData对象,可以通过js用一些键值对来模拟一系列表单控件,可以使用XMLHttpRequest的 send( ) 方法来异步提交表单与普通的ajax相比,使用FormData的最大优点就是可以异步上传二进制文件 FormData对象 FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台. 在使用ajax提交时,使用F

  • JS使用base64格式上传文件

    本文实例为大家分享了JS使用base64格式上传文件的具体代码,供大家参考,具体内容如下 html页面 <input type="file" id="fielinput" /> <img id="txshow" style="width:100px;height:100px;"/> <br/>解析之后的base64数据:<br/> <p id="data"

  • JS控制FileUpload的上传文件类型实例代码

    JS代码如下: function CheckFile(obj) { var array = new Array('gif', 'jpeg', 'png', 'jpg'); //可以上传的文件类型 if (obj.value == '') { alert("让选择要上传的图片!"); return false; } else { var fileContentType = obj.value.match(/^(.*)(\.)(.{1,8})$/)[3]; //这个文件类型正则很有用:)

  • Node.js连接mongo数据库上传文件的方法步骤

    Node.js连接mongo数据库上传文件的方法步骤

    目录 效果 初始化 model 下创建index.js用于连接数据库时的信息 修改app.js文件里的信息 router下修改user.js文件 创建上传文件保存文件夹 在public下新建一个index.html 用于请求时的主页面 效果 初始化 创建项目文件夹mondo-express 安装包 npm i express-generator -g(作用一键生成项目列表) 在项目文件夹mondo-express用终端打开输入npx express-generator自动生成项目目录 安装包 终

  • 在Node.js中使用HTTP上传文件的方法

    在Node.js中使用HTTP上传文件的方法

    开发环境 我们将使用 Visual Studio Express 2013 for Web 作为开发环境, 不过它还不能被用来做 Node.js 开发.为此我们需要安装 Node.js Tools for Visual Studio.  装好后 Visual Studio Express 2013 for Web 就会转变成一个 Node.js IDE 环境,提供创建这个应用所需要的所有东西..而基于这里提供的指导,我们需要: 下载安装 Node.js  Windows 版,选择适用你系统平台的

  • JavaScript上传文件时不用刷新页面方法总结（推荐）

    JavaScript上传文件时不用刷新页面方法总结（推荐）

    用js给出一个上传文件时不用刷新页面的方案 <input id="upload" type="file"/> <button id="upload-btn">upload</button> document.getElementById('upload-btn').onclick = function(){ var oInput = document.getElementById('upload'); var

  • SpringMVC + jquery.uploadify实现上传文件功能

    SpringMVC + jquery.uploadify实现上传文件功能

    前言 以前用Asp.net MVC+uploadify上传文件,最近学习SpringMVC,所以就用SpringMVC+uploadify做个上传文件的demo. 刚开始用form表单的方式提交,在Controller Action中用@RequestParam MultipartFile file就能拿到上传文件信息.后我直接使用uploadify的方式上传,接口没有做任何调整,上传的过程中报http400, 客户端的请求不符合接口的要求,表单post提交时报文参数是以Form Data方式,

  • JavaWeb实现上传文件功能

    JavaWeb实现上传文件功能

    本文实例为大家分享了JavaWeb实现上传文件的具体代码,供大家参考,具体内容如下 这是需要使用到的两个jar包一定要导入到lib目录中,并添加到发布的lib目录下 index.jsp <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html>   <head>     <title>$Title$</title>   &

  • servlet上传文件实现代码详解（四）

    本文实例为大家分享了servlet上传文件的具体代码,供大家参考,具体内容如下 1.servlet上传文件 servlet上传文件就是将客户端的文件上传到服务器端. 向服务器发送数据时,客户端发送的http请求正文采用"multipart/form-data"数据类型,他表示复杂的多个子部分的复合表单. 为了简化"multipart/form-data"数据的处理过程.可以使用Apache组织提供是的两个开源包来来实现上传. fileupload软件包(common

随机推荐