js实现上传文件添加和删除文件选择框

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

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

具体两个函数是这样的：

页面上这样引用：

在addFile函数中引用了另一个函数：insertHtml，这个函数主要是针对insertAdjacentHTML在firefox下无效的情况重写的，具体可以通过搜索insertAdjacentHTML找到。

PS：清除file框的内容

第二个案例

文件上传，删除效果图：

刚开始：

点击按钮“选择更多后”，可以添加很多选择文件：

点击按钮“删除”后：

实现代码：

代码瑕疵：！！！！在删除函数中，我选择的是删除第一个元素节点，而不是真正意义上的删除当前按钮，不知道怎么改善，求改正。

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