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避免数字计算精度误差的方法详解
Mar 05 Javascript
JS实现控制表格行内容垂直对齐的方法
Mar 30 Javascript
深入理解JavaScript编程中的原型概念
Jun 25 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
Sep 27 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
May 26 Javascript
AngularJs expression详解及简单示例
Sep 01 Javascript
JS闭包与延迟求值用法示例
Dec 22 Javascript
jQuery模拟窗口抖动效果
Mar 15 Javascript
vue配置请求本地json数据的方法
Apr 11 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
Jun 02 Javascript
javascript自定义加载loading效果
Sep 15 Javascript
vue项目开启Gzip压缩和性能优化操作
Oct 26 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
Linux fgetcsv取得的数组元素为空字符串的解决方法
2011/11/25 PHP
Codeigniter中禁止A Database Error Occurred错误提示的方法
2014/06/12 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
PHPStudy下如何为Apache安装SSL证书的方法步骤
2019/01/23 PHP
Jquery Ajax的Get方式时需要注意URL地方
2011/04/07 Javascript
小议JavaScript中Generator和Iterator的使用
2015/07/29 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
2016/05/13 Javascript
关于在Servelet中如何获取当前时间的操作方法
2016/06/28 Javascript
jQuery和JavaScript节点插入元素的方法对比
2016/11/18 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
2016/12/07 Javascript
新闻上下滚动jquery 超简洁(必看篇)
2017/01/21 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
2017/01/22 Javascript
jQuery中layer分页器的使用
2017/03/13 Javascript
Vue props用法详解(小结)
2018/07/03 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
2018/08/16 Javascript
发布一款npm包帮助理解npm的使用
2019/01/03 Javascript
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
2019/05/08 Javascript
详解vue-cli3多页应用改造
2019/06/04 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
python中实现精确的浮点数运算详解
2017/11/02 Python
python实现多线程网页下载器
2018/04/15 Python
python 3.6.5 安装配置方法图文教程
2018/09/18 Python
python实现微信每日一句自动发送给喜欢的人
2019/04/29 Python
Pandas_cum累积计算和rolling滚动计算的用法详解
2019/07/04 Python
Pyside2中嵌入Matplotlib的绘图的实现
2021/02/22 Python
详解纯CSS3制作的20种loading动效
2017/07/05 HTML / CSS
计算机毕业生自荐信范文
2014/03/23 职场文书
原料仓管员岗位职责
2014/04/12 职场文书
食品流通安全承诺书
2014/05/22 职场文书
档案保密承诺书
2014/06/03 职场文书
小学绿色学校申报材料
2014/08/23 职场文书
2016年万圣节家长开放日活动总结
2016/04/05 职场文书
解决Jenkins集成SonarQube遇到的报错问题
2021/07/15 Java/Android
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android
AndroidStudio图片压缩工具ImgCompressPlugin使用实例
2022/08/05 Java/Android