手机版

js实现动态添加上传文件页面

时间:2021-08-29 来源:互联网 编辑:宝哥软件园 浏览:

发邮件是需要添加一些文件,每添加一个文件,页面上可以显示一个表单文件上传选项。

此功能为:初始时刻只有一个添加按钮,当点击添加文件时,会增加一个选择文件和删除区域,同时显示上传按钮,当点击删除,此行选择文件行消失,当所有选择文件项都消失时,上传按钮将被隐藏起来。下面是实例代码:

!' DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' HTML标题动态添加文件上传列表/title脚本类型=' text/JavaScript ' var num=0;函数addFile(事件){ //创建一个差异标签,用以包含一个投入标签和删除按钮var内部div=文档。创建元素(' div ');//创建一个投入标签var输入节点=文档。创建元素(“输入”);input node . name=' file name input node . type=' file//创建一个删除按钮var delNode=文档。创建元素(“输入”);delnode . name=' deldelnode . type=' button ' delnode . value='删除;var submit=文档。getelementbyid(' submit ');//删除当前删除按钮所在的标签,为此按钮点击事件创建一个处理函数德尔诺。onclick=函数d(){ this。父节点。父节点。移除子(这个。父节点);//删除此差异区域var文件节点=文档。getelementsbyname(' FIlename ');//当没有上传文件时,隐藏使服从按钮if(文件节点。长度==0){提交。风格。显示='无';} };内部分区。append child(InputNode);内部分区。append child(DelNode);var div=文档。getelementbyid(' file ');div。appendchild(内部div);提交。风格。display=' block}/script/head正文表单id=' upload ' action=' $ { page context。请求。上下文路径}/servlet/file uploadservlet ' enctype=' multipart/form-data '方法=' post '上传文件:输入类型='按钮'值='添加文件onclick=' addFIle(this。父节点)'/br/表div id=' file '/div/表输入id=' submit '类型=' submit '值='上传style=' display : none '//form/body/html此实例代码中,添加文件将动态增加一个差异区域,div区域包含一个文件输入标签和删除按钮。

动态创建一个投入标签示例:

//创建一个差异标签,用以包含一个投入标签和删除按钮var内部div=文档。创建元素(' div ');//创建一个投入标签var输入节点=文档。创建元素(“输入”);input node . name=' filenameinput node . type=' file inner div。append child(InputNode);以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

版权声明:js实现动态添加上传文件页面是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。