本文这里给大家说个用爪哇岛描述语言实现的很实用的功能，是在上传附件的时候，可以动态地添加和删除文件选择框，然后一次性上传。

从理论上看，实现起来比较容易，但实际工作的时候还是遇到两个难点，这些难点归结起来都是一个原因造成的，那就是浏览器的兼容性。在脚本中要用到两个函数：insertAdjacentHTML和removeChild，而恰好这两个函数在火狐浏览器下都不能正常使用。几乎花费了一天的时候，在网上搜索着解决的方法，还好被找到了，也让我大松一口气。

具体两个函数是这样的：

脚本类型='text/javascript' //删除文件选择框函数删除文件(id){ var new _ tr=id。父节点；尝试{//new _ tr。remove node(true)；//只是即，不是w3c/其他想法新tr.parentNode//为了在工程师协会和火狐浏览器下都能正常使用，就要用另一个方法代替，最取上一层的父结点，然后移除tmp。移除子项(new _ tr)；} catch(e) {} } //添加文件选择框函数addFIle(id){ var str=' divinput type=' file ' runat=' server ' name=' file ' OnKeyDown=' this。blur()；oncontext菜单=' return false '/input type=' button ' value='删除style=' height :22 pconclick=' remove file(this)'//div ' insertHtml(' end '之前)，document.getElementById(id)，str)；}/脚本页面上这样引用：

差异输入类型='按钮'值='添加附件(添加)' onclick=' addFile('我的文件')'/div div id='我的文件'/div在添加文件函数中引用了另一个函数：插入Html，这个函数主要是针对insertAdjacentHTML在火狐浏览器下无效的情况重写的，具体可以通过搜索insertAdjacentHTML找到。

PS:清除文件框的内容

输入类型=文件名=TTT输入类型=按钮点击=' TTT。select()；文件。执行命令(“删除”)；"值=清除文件框的内容第二个案例

文件上传，删除效果图：

刚开始：

点击按钮"选择更多后",可以添加很多选择文件：

点击按钮"删除"后：

实现代码：

！DOCTYPE html html health eta charset=' utf-8 '标题选择文件/title style type=' text/CSS ' * { margin :0 px；padd :0 px } div { margin 336010 px }/style script//当点击添加更多时，增加一个DIV//先增加两个输入函数addFile(){ var fragment=document。createdocumentfragment()；var div节点=文档。getelementbyid('容器');var new DiV=文档。create element(' DiV ')；newDiv.setAttribute('id '，' file ')；碎片。append child(NewDiV)；var新输入=文档。创建元素(“输入”)；newInput.setAttribute('type '，' file ')；newInput.setAttribute('name '，'选择文件');新部门。appendchild(新输入)；var新输入=文档。创建元素(“输入”)；newInput.setAttribute('type '，' button ')；newInput.setAttribute('value '，'删除');newInput.setAttribute('onclick '，' delFile()')；newInput.setAttribute('id '，' 1 ')；新部门。appendchild(新输入)；divNode.appendChild(片段);}函数delFile(){ var div node=document。getelementbyid(“容器”)；div节点。移除子节点(div节点。第一个元素子元素)；}/script/head dyinput type=' button ' value='选择更多onclick=' addFIle()'/div id=' container ' div id=' file '输入类型=' file ' name='选择文件/input type='button' value='删除onclick=' DelFIle()'//div/div/body/html代码瑕疵：在删除函数中，我选择的是删除第一个元素节点，而不是真正意义上的删除当前按钮，不知道怎么改善，求改正。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。