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 相关文章推荐
URL编码转换,escape() encodeURI() encodeURIComponent()
Dec 27 Javascript
jQuery学习5 jQuery事件模型
Feb 07 Javascript
javascript数字格式化通用类 accounting.js使用
Aug 24 Javascript
JavaScript实现文字与图片拖拽效果的方法
Feb 16 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
Jul 27 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
Nov 09 Javascript
浅谈jquery中next与siblings的区别
Oct 27 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
Dec 08 Javascript
使用Vue制作图片轮播组件思路详解
Mar 21 Javascript
在Vue中获取组件声明时的name属性方法
Sep 12 Javascript
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
JS 5种遍历对象的方式
Jun 16 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生成excel文件的简单方法
2014/02/08 PHP
PHP中的traits简单使用实例
2015/05/13 PHP
PHP面向对象多态性实现方法简单示例
2017/09/27 PHP
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
2013/03/25 Javascript
js 程序执行与顺序实现详解
2013/05/13 Javascript
Jquery动态更改一张位图的src与Attr的使用
2013/07/31 Javascript
js输出阴历、阳历、年份、月份、周示例代码
2014/01/29 Javascript
jQuery 删除/替换DOM元素的几种方式
2014/05/20 Javascript
JavaScript判断浏览器类型的方法
2015/02/10 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
深入解析JavaScript的闭包机制
2015/10/20 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
2017/01/04 Javascript
Canvas 绘制粒子动画背景
2017/02/15 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
2017/10/24 Javascript
vue 组件的封装之基于axios的ajax请求方法
2018/08/11 Javascript
jQuery pagination分页示例详解
2018/10/23 jQuery
node实现简单的增删改查接口实例代码
2019/08/22 Javascript
小程序使用分包的示例代码
2020/03/23 Javascript
jquery实现简单拖拽效果
2020/07/20 jQuery
用Python解析XML的几种常见方法的介绍
2015/04/09 Python
python中利用Future对象回调别的函数示例代码
2017/09/07 Python
13个最常用的Python深度学习库介绍
2017/10/28 Python
Php多进程实现代码
2018/05/07 Python
python矩阵转换为一维数组的实例
2018/06/05 Python
numpy向空的二维数组中添加元素的方法
2018/11/01 Python
使用python绘制3维正态分布图的方法
2018/12/29 Python
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
自荐信的两点禁忌
2013/10/30 职场文书
销售主管岗位职责范本
2014/02/14 职场文书
励志演讲稿500字
2014/08/21 职场文书
委托证明模板
2014/09/16 职场文书
护士个人年度总结范文
2015/02/13 职场文书
聚会通知怎么写
2015/04/23 职场文书
MyBatis自定义SQL拦截器示例详解
2021/10/24 Java/Android