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 相关文章推荐
cookie 最近浏览记录(中文escape转码)具体实现
Jun 08 Javascript
JS中Eval解析JSON字符串的一个小问题
Feb 21 Javascript
javaScript数组迭代方法详解
Apr 14 Javascript
Bootstrap开发实战之第一次接触Bootstrap
Jun 02 Javascript
JavaScript跨域调用基于JSON的RESTful API
Jul 09 Javascript
javascript宿主对象之window.navigator详解
Sep 07 Javascript
JS如何设置iOS中微信浏览器的title
Nov 22 Javascript
Vue快速实现通用表单验证的示例代码
Jan 09 Javascript
ES6 Object.assign()的用法及其使用
Jan 18 Javascript
Vue组件化开发之通用型弹出框的实现
Feb 28 Javascript
vue-cli脚手架的.babelrc文件用法说明
Sep 11 Javascript
原生JavaScript实现弹幕组件的示例代码
Oct 12 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异常处理定义与使用方法分析
2017/07/25 PHP
javascript 图片上一张下一张链接效果代码
2010/03/12 Javascript
js 自定义个性下拉选择框示例
2013/08/20 Javascript
js类式继承的具体实现方法
2013/12/31 Javascript
JavaScript 事件入门知识
2015/04/13 Javascript
AngularJS实现分页显示数据库信息
2016/07/01 Javascript
javascript 显示全局变量与隐式全局变量的区别
2017/02/09 Javascript
基于Vue2.0的分页组件
2017/03/16 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
2017/10/25 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
2017/12/28 Javascript
React 组件转 Vue 组件的命令写法
2018/02/28 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
2018/03/15 Javascript
ES6小技巧之代替lodash
2019/06/07 Javascript
关于layui 弹出层一闪而过就消失的解决方法
2019/09/09 Javascript
vue + axios get下载文件功能
2019/09/25 Javascript
Vue实现剪贴板复制功能
2019/12/31 Javascript
python 日志增量抓取实现方法
2018/04/28 Python
Tensorflow 训练自己的数据集将数据直接导入到内存
2018/06/19 Python
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
Python实现的合并两个有序数组算法示例
2019/03/04 Python
Win10里python3创建虚拟环境的步骤
2020/01/31 Python
python设置环境变量的作用整理
2020/02/17 Python
pytorch数据预处理错误的解决
2020/02/20 Python
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
九年级科学教学反思
2014/01/29 职场文书
转让协议书范本
2014/04/15 职场文书
医德医风演讲稿
2014/05/20 职场文书
生物学专业求职信
2014/07/23 职场文书
咖啡厅商业计划书
2014/09/15 职场文书
机关干部三严三实心得体会
2014/10/13 职场文书
迎新年主持词
2015/07/06 职场文书
2016年端午节寄语
2015/12/04 职场文书
Sql-Server数据库单表查询 4.3实验课
2021/04/05 SQL Server
Python之Matplotlib绘制热力图和面积图
2022/04/13 Python
ubuntu开机后ROS程序自启动问题
2022/12/24 Servers