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 vvorld 在线加密破解方法
Nov 13 Javascript
javascript 闭包疑问
Dec 30 Javascript
javascript利用控件对windows的操作实现原理与应用
Dec 23 Javascript
node.js中Socket.IO的进阶使用技巧
Nov 04 Javascript
jquery.mousewheel实现整屏翻屏效果
Aug 30 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
Sep 01 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
May 31 Javascript
深入理解jQuery之事件移除
Jun 02 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
Nov 22 Javascript
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
vue父组件向子组件(props)传递数据的方法
Jan 02 Javascript
Node.js中DNS模块学习总结
Feb 28 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
PHP下常用正则表达式整理
2010/10/26 PHP
php fsockopen解决办法 php实现多线程
2014/01/20 PHP
php替换字符串中间字符为省略号的方法
2015/05/04 PHP
smarty简单应用实例
2015/11/03 PHP
Laravel中间件实现原理详解
2016/10/09 PHP
一个JS小玩意 几个属性相加不能超过一个特定值.
2009/09/29 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
2015/11/30 Javascript
基于jquery实现轮播特效
2016/04/22 Javascript
javascript基础知识
2016/06/07 Javascript
教你如何用node连接redis的示例代码
2018/07/12 Javascript
详解如何更好的使用module vuex
2019/03/27 Javascript
Vue 子组件与数据传递问题及注意事项
2019/07/11 Javascript
vue实现图片预览组件封装与使用
2019/07/13 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
2020/05/10 Javascript
深入理解python中的select模块
2017/04/23 Python
在django中使用自定义标签实现分页功能
2017/07/04 Python
python3实现域名查询和whois查询功能
2018/06/21 Python
python 3.6.4 安装配置方法图文教程
2018/09/18 Python
python高级特性和高阶函数及使用详解
2018/10/17 Python
使用Python的Turtle库绘制森林的实例
2019/12/18 Python
在django中使用post方法时,需要增加csrftoken的例子
2020/03/13 Python
pandas数据拼接的实现示例
2020/04/16 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
基于python实现生成指定大小txt文档
2020/07/20 Python
Python编写单元测试代码实例
2020/09/10 Python
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
孕妇装中的著名品牌:Isabella Oliver(伊莎贝拉·奥利弗)
2016/10/31 全球购物
研究生求职推荐信范文
2013/11/30 职场文书
会计学个人自荐信模板
2013/12/13 职场文书
质检部职责
2013/12/28 职场文书
2014年大学庆元旦迎新年活动方案
2014/03/09 职场文书
民主评议政风行风整改方案
2014/09/17 职场文书
大学生个人学习总结
2015/02/15 职场文书
Java实现斗地主之洗牌发牌
2021/06/14 Java/Android
Java 超详细讲解ThreadLocal类的使用
2022/04/07 Java/Android