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 相关文章推荐
清除网页历史记录,屏蔽后退按钮!
Dec 22 Javascript
谷歌浏览器 insertCell与appendChild的区别
Feb 12 Javascript
Jquery 表单取值赋值的一些基本操作
Oct 11 Javascript
Domino中运用jQuery读取视图内容的方法
Oct 21 Javascript
js写一个弹出层并锁屏效果实现代码
Dec 07 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
Oct 24 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
Jun 13 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
Aug 08 Javascript
学习jQuery中的noConflict()用法
Sep 28 jQuery
vue elementUI table表格数据 滚动懒加载的实现方法
Apr 04 Javascript
解析原来浏览器原生支持JS Base64编码解码
Aug 12 Javascript
在vue中使用回调函数,this调用无效的解决
Aug 11 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
oracle资料库函式库
2006/10/09 PHP
php下HTTP Response中的Chunked编码实现方法
2008/11/19 PHP
PHP教程 基本语法
2009/10/23 PHP
rrmdir php中递归删除目录及目录下的文件
2011/05/15 PHP
PHP查询数据库中满足条件的记录条数(两种实现方法)
2013/01/29 PHP
PHP错误和异长常处理总结
2014/03/06 PHP
合并ThinkPHP配置文件以消除代码冗余的实现方法
2014/07/22 PHP
求帮忙修改个php curl模拟post请求内容后并下载文件的解决思路
2015/09/20 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
Yii 2.0中场景的使用教程
2017/06/02 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
原生javascript实现的分页插件pagenav
2014/08/28 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
2015/06/15 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
jQuery通用的全局遍历方法$.each()用法实例
2016/07/04 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
2016/09/04 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
2017/01/14 Javascript
微信小程序实现页面跳转传值的方法
2017/10/12 Javascript
JS+CSS3实现的简易钟表效果示例
2019/04/13 Javascript
vue-router路由模式详解(小结)
2019/08/26 Javascript
JavaScript获取某一天所在的星期
2019/09/05 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
2020/08/04 Javascript
Python实现的txt文件去重功能示例
2018/07/07 Python
符合语言习惯的 Python 优雅编程技巧【推荐】
2018/09/25 Python
解决Django layui {{}}冲突的问题
2019/08/29 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
pymysql模块使用简介与示例
2020/11/17 Python
应届生文秘专业个人自荐信格式
2013/09/21 职场文书
清洁工岗位职责
2014/01/29 职场文书
工商管理本科生求职信
2014/07/13 职场文书
机关干部个人对照检查材料思想汇报
2014/09/28 职场文书
2015年乡镇民政工作总结
2015/05/13 职场文书
2015个人年度工作总结范文
2015/05/28 职场文书
2015迎新晚会活动总结
2015/07/16 职场文书
Python基础详解之描述符
2021/04/28 Python