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 相关文章推荐
一段效率很高的for循环语句使用方法
Aug 13 Javascript
js工具方法弹出蒙版
May 08 Javascript
jquery操作checkbox实现全选和取消全选
May 02 Javascript
JQuery中$.each 和$(selector).each()的区别详解
Mar 13 Javascript
vue-ajax小封装实例
Sep 18 Javascript
使用vue中的v-for遍历二维数组的方法
Mar 07 Javascript
JavaScript实现短暂提示框功能
Apr 04 Javascript
JavaScript控制浏览器全屏显示简单示例
Jul 05 Javascript
实现高性能javascript的注意事项
May 27 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
Jan 26 Javascript
node.JS事件机制与events事件模块的使用方法详解
Feb 06 Javascript
react使用antd表单赋值,用于修改弹框的操作
Oct 29 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变量的定义、可变变量、变量引用、销毁方法
2013/12/20 PHP
有关于PHP中常见数据类型的汇总分享
2014/01/06 PHP
php中常量DIRECTORY_SEPARATOR用法深入分析
2014/11/14 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
PHP实现的XXTEA加密解密算法示例
2018/08/28 PHP
PHP使用mongoclient简单操作mongodb数据库示例
2019/02/08 PHP
简单的js分页脚本
2009/05/21 Javascript
JQuery扩展插件Validate 5添加自定义验证方法
2011/09/05 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
2015/05/03 Javascript
异步JS框架的作用以及实现方法
2015/10/29 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
jQuery实现打开页面渐现效果示例
2016/07/27 Javascript
Three.js快速入门教程
2016/09/09 Javascript
jQuery鼠标事件总结
2016/10/13 Javascript
简单实现js倒计时功能
2017/02/13 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
2018/01/03 Javascript
以v-model与promise两种方式实现vue弹窗组件
2018/05/21 Javascript
Nuxt配合Node在实际生产中的应用详解
2018/08/07 Javascript
Vue 实现列表动态添加和删除的两种方法小结
2018/09/07 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
2020/07/17 Javascript
vue项目中播放rtmp视频文件流的方法
2020/09/17 Javascript
Webpack的Loader和Plugin的区别
2020/11/09 Javascript
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python中处理字符串之islower()方法的使用简介
2015/05/19 Python
python flask中静态文件的管理方法
2018/03/20 Python
Python实现购物车购物小程序
2018/04/18 Python
python+opencv+caffe+摄像头做目标检测的实例代码
2018/08/03 Python
django将数组传递给前台模板的方法
2019/08/06 Python
Python操作SQLite/MySQL/LMDB数据库的方法
2019/11/07 Python
Pytest单元测试框架如何实现参数化
2020/09/05 Python
什么是会话Bean
2015/05/14 面试题
实习协议书
2015/01/27 职场文书
杜甫草堂导游词
2015/02/03 职场文书
浅谈JS的二进制家族
2021/05/09 Javascript
MySQL外键约束(Foreign Key)案例详解
2022/06/28 MySQL