js实现动态添加上传文件页面
更新时间：2018年10月22日 09:50:33 作者：阿良的空间
这篇文章主要为大家详细介绍了js实现动态添加上传文件页面，如何动态创建一个input标签示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
发邮件是需要添加一些文件，每添加一个文件，页面上可以显示一个表单文件上传选项。
此功能为：初始时刻只有一个添加按钮，当点击添加文件时，会增加一个选择文件和删除区域，同时显示上传按钮，当点击删除，此行选择文件行消失，当所有选择文件项都消失时，上传按钮将被隐藏起来。下面是实例代码：
<!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);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
ie8 不支持new Date(2012-11-10)问题的解决方法
使用JS的时候也碰到了如下问题，后来经过修改，在IE8环境里，下面的代码是可用的，下面与大家分享下ie8 不支持new Date的解决方法，有类似问题的朋友可以参考下2013-07-07
这篇文章主要介绍了Javascript blur与click冲突解决办法的相关资料,在开发过程中经常会遇到blur与click 冲突的情况，这里举了几个例子，和解决办法，需要的朋友可以参考下2017-01-01
这篇文章主要介绍了JS实现的JSON序列化操作,结合简单实例形式分析了json序列化操作相关实现方法与相关注意事项,代码备有较为详尽的注释便于理解,需要的朋友可以参考下2018-07-07
这篇文章主要介绍了小程序图片剪裁的示例代码，可以通过手势控制旋转缩放移动，也可以点击旋转进行90度旋转，非常具有实用价值，感兴趣的小伙伴们可以参考一下2018-07-07
这篇文章主要介绍了javascript函数特点,实例分析了javascript函数传递参数及调用方法,需要的朋友可以参考下2015-05-05
这篇文章主要介绍了JavaScript仿静态分页实现方法,可实现模拟静态效果的分页功能,并且可以控制分页的字符数,使用时可根据情况进行相应的字段修改即可,非常灵活实用,需要的朋友可以参考下2015-08-08
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
这篇文章主要介绍了BootStrap点击保存后实现模态框自动关闭的思路(模态框),需要的朋友可以参考下2017-09-09
这篇文章主要介绍了javascript中this的用法,结合具体实例形式总结分析了javascript中this各种常见的功能、用法及相关操作注意事项,需要的朋友可以参考下2019-07-07
这篇文章主要为大家详细介绍了JS实现盒子拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
本文介绍了对javascript数据类型；隐式转换 （+ 和 -，== 和 ===）；包装对象等相关知识进行详细介绍，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
最新评论