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 相关文章推荐
JScript的条件编译
May 29 Javascript
监控 url fragment变化的js代码
Apr 19 Javascript
使用javascript实现json数据以csv格式下载
Jan 09 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
Jun 11 Javascript
实例详解jQuery结合GridView控件的使用方法
Jan 04 Javascript
jQuery插件imgPreviewQs实现上传图片预览
Jan 15 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
Apr 17 Javascript
深入理解JavaScript单体内置对象
Jun 06 Javascript
vue框架搭建之axios使用教程
Jul 11 Javascript
node.js命令行教程图文详解
May 27 Javascript
微信小程序 调用微信授权窗口相关问题解决
Jul 25 Javascript
Nest.js 授权验证的方法示例
Feb 22 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中的字符串函数
2006/10/09 PHP
15个小时----从修改程序到自己些程序
2006/10/09 PHP
FCKeditor的安装(PHP)
2007/01/13 PHP
php生成图片验证码的实例讲解
2015/08/03 PHP
PHP控制前台弹出对话框的实现方法
2016/08/21 PHP
ThinkPHP使用getlist方法实现数据搜索功能示例
2017/05/08 PHP
ThinkPHP 在阿里云上的nginx.config配置实例详解
2017/10/11 PHP
PHP使用PDO创建MySQL数据库、表及插入多条数据操作示例
2019/05/30 PHP
jQuery 剧场版 你必须知道的javascript
2009/05/27 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
javascript中typeof操作符和constucor属性检测
2015/02/26 Javascript
Jquery 分页插件之Jquery Pagination
2015/08/25 Javascript
JavaScript获取function所有参数名的方法
2015/10/30 Javascript
读Javascript高性能编程重点笔记
2016/12/21 Javascript
JavaScript实现公历转农历功能示例
2017/02/13 Javascript
获取当前按钮或者html的ID名称实例(推荐)
2017/06/23 Javascript
详解vue-router和vue-cli以及组件之间的传值
2017/07/04 Javascript
解决ionic和angular上拉加载的问题
2017/08/03 Javascript
深入理解Vue官方文档梳理之全局API
2017/11/22 Javascript
微信小程序入门之广告条实现方法示例
2018/12/05 Javascript
微信小程序身份证验证方法实现详解
2019/06/28 Javascript
python将字典内容存入mysql实例代码
2018/01/18 Python
python实现单向链表详解
2018/02/08 Python
Python 实现选择排序的算法步骤
2018/04/22 Python
Python切片索引用法示例
2018/05/15 Python
Django框架的使用教程路由请求响应的方法
2018/07/03 Python
Python实现监控键盘鼠标操作示例【基于pyHook与pythoncom模块】
2018/09/04 Python
解决Pycharm界面的子窗口不见了的问题
2019/01/17 Python
国际礼品店:GiftsnIdeas
2018/05/03 全球购物
应聘护士自荐信
2013/10/21 职场文书
个人委托书
2014/07/31 职场文书
毕业实习自我鉴定范文2014
2014/09/26 职场文书
2014年医院个人工作总结
2014/12/09 职场文书
Golang日志包的使用
2022/04/20 Golang
python画条形图的具体代码
2022/04/20 Python
JS前端可视化canvas动画原理及其推导实现
2022/08/05 Javascript