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实现拼音排序的方法
Nov 20 Javascript
jquery显示隐藏input对象
Jul 21 Javascript
用javascript关闭本窗口不弹出询问框的方法
Sep 12 Javascript
每天一篇javascript学习小结(RegExp对象)
Nov 17 Javascript
js实现点击图片自动提交action的简单方法
Oct 16 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
Jan 20 Javascript
Bootstrap下拉菜单样式
Feb 07 Javascript
JS检测数组类型的方法小结
Mar 14 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
Sep 12 Javascript
Vue代码分割懒加载的实现方法
Nov 23 Javascript
解决微信小程序防止无法回到主页的问题
Sep 28 Javascript
微信小程序云开发如何实现数据库自动备份实现
Aug 16 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/05/14 PHP
PHP将XML转数组过程详解
2013/11/13 PHP
Symfony2使用Doctrine进行数据库查询方法实例总结
2016/03/18 PHP
PHP的Yii框架中过滤器相关的使用总结
2016/03/29 PHP
浅谈PHP Cookie处理函数
2016/06/10 PHP
PHP实现的文件上传类与用法详解
2017/07/05 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
IE JS编程需注意的内存释放问题
2009/06/23 Javascript
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
js实现简单的星级选择器提交效果适用于评论等
2013/10/18 Javascript
jtable列中自定义button示例代码
2013/11/21 Javascript
Node.js 应用跑得更快 10 个技巧
2016/04/03 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
Angularjs中date过滤器失效的问题及解决方法
2018/07/06 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
2018/08/21 jQuery
支付宝小程序tabbar底部导航
2018/11/06 Javascript
微信小程序自定义胶囊样式
2020/12/27 Javascript
原生JS实现音乐播放器
2021/01/26 Javascript
python实现决策树C4.5算法详解(在ID3基础上改进)
2017/05/31 Python
java中两个byte数组实现合并的示例
2018/05/09 Python
Numpy之文件存取的示例代码
2018/08/03 Python
Pytorch中的variable, tensor与numpy相互转化的方法
2019/10/10 Python
Python3监控疫情的完整代码
2020/02/20 Python
python re的findall和finditer的区别详解
2020/11/15 Python
英国皇家邮政海外旗舰店:Royal Mail
2018/02/21 全球购物
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
农民致富事迹材料
2014/01/23 职场文书
中学自我评价
2014/01/31 职场文书
学习群众路线的心得体会
2014/11/05 职场文书
2016寒假社会实践心得体会范文
2015/10/09 职场文书
2019毕业典礼主持词!
2019/07/05 职场文书
Vue Element UI自定义描述列表组件
2021/05/18 Vue.js
使用 Apache 反向代理的设置技巧
2022/01/18 Servers
pandas进行数据输入和输出的方法详解
2022/03/23 Python
GoFrame框架数据校验之校验结果Error接口对象
2022/06/21 Golang
windows系统安装配置nginx环境
2022/06/28 Servers