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


Posted in Javascript onOctober 22, 2018

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

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);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 替换Html标签实现代码
Oct 14 Javascript
基于JQuery框架的AJAX实例代码
Nov 03 Javascript
Array.prototype 的泛型应用分析
Apr 30 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
Jan 13 Javascript
javascript中的startWith和endWith的几种实现方法
May 07 Javascript
vue2.0+webpack环境的构造过程
Nov 08 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
Dec 14 Javascript
jQuery.Form上传文件操作
Feb 05 Javascript
微信小程序简单实现form表单获取输入数据功能示例
Nov 30 Javascript
vue计算属性及使用详解
Apr 02 Javascript
Angular7创建项目、组件、服务以及服务的使用
Feb 19 Javascript
详解JS深拷贝与浅拷贝
Aug 04 Javascript
Javascript 实现 Excel 导入生成图表功能
Oct 22 #Javascript
js实现动态增加文件域表单功能
Oct 22 #Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
Oct 22 #Javascript
js实现input密码框显示/隐藏功能
Sep 10 #Javascript
Vue slot用法(小结)
Oct 22 #Javascript
TypeScript基础入门教程之三重斜线指令详解
Oct 22 #Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
Oct 22 #Javascript
You might like
10条PHP编程习惯助你找工作
2008/09/29 PHP
深入密码加salt原理的分析
2013/06/06 PHP
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
浅析51个PHP处理字符串的函数
2013/08/02 PHP
Yii清理缓存的方法
2016/01/06 PHP
Yii框架实现邮箱激活的方法【数字签名】
2016/10/18 PHP
php简单中奖算法(实例)
2017/08/15 PHP
javascript 日期时间函数(经典+完善+实用)
2009/05/27 Javascript
js location.replace与location.reload的区别
2010/09/08 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
2011/02/11 Javascript
常用的JavaScript验证正则表达式汇总
2013/11/26 Javascript
利用Jquery实现可多选的下拉框
2014/02/21 Javascript
jquery单行文字向上滚动效果示例
2014/03/06 Javascript
JavaScript数组常用方法
2015/03/02 Javascript
JavaScript中函数(Function)的apply与call理解
2015/07/08 Javascript
js发送短信倒计时的简单实现方法
2016/09/08 Javascript
node.js缺少mysql模块运行报错的解决方法
2016/11/13 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
node vue项目开发之前后端分离实战记录
2017/12/13 Javascript
vue 属性拦截实现双向绑定的实例代码
2018/10/24 Javascript
Vue.js的复用组件开发流程完整记录
2018/11/29 Javascript
微信小程序实现banner图轮播效果
2020/06/28 Javascript
postman自定义函数实现 时间函数的思路详解
2019/04/17 Javascript
python抽象基类用法实例分析
2015/06/04 Python
详解Django框架中的视图级缓存
2015/07/23 Python
使用py2exe在Windows下将Python程序转为exe文件
2016/03/04 Python
详解Ubuntu16.04安装Python3.7及其pip3并切换为默认版本
2019/02/25 Python
Python自定义一个异常类的方法
2019/06/27 Python
python温度转换华氏温度实现代码
2020/12/06 Python
挂科检讨书范文
2014/02/20 职场文书
写好自荐信需做到的5要点
2014/03/07 职场文书
积极向上的团队口号
2014/06/06 职场文书
校庆标语集锦
2014/06/25 职场文书
2014年计生工作总结
2014/11/21 职场文书
超市食品安全承诺书
2015/04/29 职场文书
无保留意见审计报告
2015/06/05 职场文书