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的eval()中使用函数的进一步讨论
Jul 26 Javascript
ExtJs GridPanel简单的增删改实现代码
Aug 26 Javascript
图片动画横条广告带上下滚动的JS代码
Oct 25 Javascript
js仿百度贴吧验证码特效实例代码
Jan 16 Javascript
jQuery 重复加载错误以及修复方法
Dec 16 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
Mar 27 Javascript
jQuery validate插件实现ajax验证重复的2种方法
Jan 22 Javascript
深入理解js中this的用法
May 28 Javascript
BooStrap对导航条的改造实践小结
Sep 21 Javascript
JavaScript 继承详解(五)
Oct 11 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
Feb 11 Javascript
小程序实现自定义导航栏适配完美版
Apr 02 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 MYSQL 数据备份类
2009/06/19 PHP
使用PHP生成二维码的两种方法(带logo图像)
2014/03/14 PHP
PHP使用CURL_MULTI实现多线程采集的例子
2014/07/29 PHP
yii添删改查实例
2015/11/16 PHP
实例介绍PHP中zip_open()函数用法
2019/02/15 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
php遍历目录下文件并按修改时间排序操作示例
2019/07/12 PHP
Laravel 6.2 中添加了可调用容器对象的方法
2019/10/22 PHP
精通JavaScript 纠正 cleanWhitespace函数
2010/03/11 Javascript
JavaScript中获取未知对象属性的代码
2011/04/27 Javascript
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
2015/12/18 Javascript
浅析创建javascript对象的方法
2016/05/13 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
js中scrollTop()方法和scroll()方法用法示例
2016/10/03 Javascript
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
[00:36]DOTA2勇士令状莱恩声望物品——冥晶之厄展示
2018/05/25 DOTA
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
Python 类与元类的深度挖掘 II【经验】
2016/05/06 Python
Python中的TCP socket写法示例
2018/05/11 Python
Python selenium 加载并保存QQ群成员,去除其群主、管理员信息的示例代码
2020/05/28 Python
Python高并发解决方案实现过程详解
2020/07/31 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
Django REST Framework 分页(Pagination)详解
2020/11/30 Python
俄罗斯一家时尚女装商店:Charuel
2019/12/04 全球购物
美国新娘礼品店:The Paisley Box
2020/09/08 全球购物
美国室内盆栽植物购买网站:Plants.com
2020/04/24 全球购物
如何现实servlet的单线程模式
2014/08/05 面试题
2013年学期结束动员演讲稿
2014/01/07 职场文书
党的群众路线教育实践活动批评与自我批评
2014/02/16 职场文书
《中彩那天》教学反思
2014/02/22 职场文书
2015年语文教师工作总结
2015/05/25 职场文书
在酒桌上的敬酒词
2015/08/12 职场文书
房屋买卖定金协议书
2016/03/21 职场文书
500字作文之关于爸爸
2019/11/14 职场文书
CentOS安装Nginx并部署vue
2022/04/12 Servers