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 克隆数组最简单的方法
Feb 12 Javascript
js中unicode转码方法详解
Oct 09 Javascript
javascript实现查找数组中最大值方法汇总
Feb 13 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
Mar 25 Javascript
常用原生JS兼容性写法汇总
Apr 27 Javascript
Javascript中常见的逻辑题和解决方法
Sep 17 Javascript
JavaScript中setTimeout的那些事儿
Nov 14 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
Jan 13 Javascript
Vue中props的使用详解
Jun 15 Javascript
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
Jul 27 Javascript
js+css实现扇形导航效果
Aug 18 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
FCKeditor添加自定义按钮
2008/03/27 PHP
php抓取网站图片并保存的实现方法
2015/10/29 PHP
PHP ADODB生成下拉列表框功能示例
2018/05/29 PHP
javascript中onclick(this)用法介绍
2013/04/19 Javascript
JavaScript中匿名函数用法实例
2015/03/23 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
2016/03/25 Javascript
AngularJs定制样式插入到ueditor中的问题小结
2016/08/01 Javascript
利用JavaScript阻止表单提交的两种方法
2016/08/11 Javascript
Nodejs中解决cluster模块的多进程如何共享数据问题
2016/11/10 NodeJs
vue v-model表单控件绑定详解
2017/05/17 Javascript
vue移动端UI框架实现QQ侧边菜单组件
2018/03/09 Javascript
在create-react-app中使用css modules的示例代码
2018/07/31 Javascript
详解vantUI框架在vue项目中的应用踩坑
2018/12/06 Javascript
今天,小程序正式支持 SVG
2019/04/20 Javascript
解决Vue打包上线之后部分CSS不生效的问题
2019/11/12 Javascript
在vscode 中设置 vue模板内容的方法
2020/09/02 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
2020/09/27 Javascript
浅析我对JS延迟异步脚本的思考
2020/10/12 Javascript
python编写暴力破解FTP密码小工具
2014/11/19 Python
django定期执行任务(实例讲解)
2017/11/03 Python
使用Python通过win32 COM打开Excel并添加Sheet的方法
2018/05/02 Python
django连接mysql数据库及建表操作实例详解
2019/12/10 Python
python自动识别文本编码格式代码
2019/12/26 Python
python绘制动态曲线教程
2020/02/24 Python
python中PyQuery库用法分享
2021/01/15 Python
Wojas罗马尼亚网站:波兰皮鞋品牌
2018/11/01 全球购物
Blue Nile蓝色尼罗河香港官网:世界最大在线钻石珠宝销售商
2020/05/07 全球购物
Java程序员综合测试题
2014/04/25 面试题
2014年档案管理员工作总结
2014/12/01 职场文书
委托书格式要求
2015/01/28 职场文书
自荐信模板大全
2015/03/27 职场文书
2015小学毕业班工作总结
2015/07/21 职场文书
生产设备维护保养制度
2015/08/06 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
四年级作文之说明文作文
2019/10/14 职场文书
Spring Cloud Netflix 套件中的负载均衡组件 Ribbon
2022/04/13 Java/Android