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 相关文章推荐
ie 处理 gif动画 的onload 事件的一个 bug
Apr 12 Javascript
基于Jquery的动态添加控件并取值的实现代码
Sep 24 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
Oct 11 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
Jul 09 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
Aug 25 Javascript
基于JavaScript短信验证码如何实现
Jan 24 Javascript
bootstrap datetimepicker日期插件使用方法
Jan 13 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
通过命令行创建vue项目的方法
Jul 20 Javascript
js 奇葩技巧之隐藏代码
Aug 11 Javascript
利用vue开发一个所谓的数独方法实例
Dec 21 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
Aug 25 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字符串过滤与替换小结
2015/01/26 PHP
php代码检查代理ip的有效性
2016/08/19 PHP
用JQUERY增删元素的代码
2012/02/14 Javascript
常用Extjs工具:Extjs.util.Format使用方法
2012/03/22 Javascript
详谈LABJS按需动态加载js文件
2015/05/07 Javascript
JS+CSS简单树形菜单实现方法
2015/09/12 Javascript
JS实现字符串转日期并比较大小实例分析
2015/12/09 Javascript
jQuery实现的分子运动小球碰撞效果
2016/01/27 Javascript
Vue.js render方法使用详解
2017/04/05 Javascript
Angular通过angular-cli来搭建web前端项目的方法
2017/07/27 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
2018/01/08 Javascript
微信小程序实现类似微信点击语音播放效果
2020/03/30 Javascript
js实现页面图片消除效果
2020/03/24 Javascript
[01:31:03]DOTA2完美盛典全回顾 见证十五项大奖花落谁家
2017/11/28 DOTA
对于Python的Django框架部署的一些建议
2015/04/09 Python
Python实现二分查找算法实例
2015/05/26 Python
浅谈Python中函数的参数传递
2016/06/21 Python
JSON Web Tokens的实现原理
2017/04/02 Python
python得到单词模式的示例
2018/10/15 Python
Python的条件表达式和lambda表达式实例
2019/01/31 Python
pycharm访问mysql数据库的方法步骤
2019/06/18 Python
python 求定积分和不定积分示例
2019/11/20 Python
python创建学生管理系统
2019/11/22 Python
numpy库ndarray多维数组的维度变换方法(reshape、resize、swapaxes、flatten)
2020/04/28 Python
基于Python把网站域名解析成ip地址
2020/05/25 Python
Python ADF 单位根检验 如何查看结果的实现
2020/06/03 Python
python上下文管理的使用场景实例讲解
2021/03/03 Python
新加坡网上化妆品店:Best Buy World
2018/05/18 全球购物
HelloFresh奥地利:立即订购烹饪盒
2019/02/22 全球购物
汉语言文学毕业生求职信
2013/10/01 职场文书
给校长的建议书300字
2014/05/16 职场文书
绿色环保口号
2014/06/12 职场文书
欢迎新生标语
2014/10/06 职场文书
护士旷工检讨书
2015/08/15 职场文书
2019财务毕业实习报告
2019/06/27 职场文书
Promise静态四兄弟实现示例详解
2022/07/07 Javascript