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

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

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

具体两个函数是这样的:

rush:js;">

页面上这样引用:

rush:xhtml;">
添加附件(Add)" onclick="addFile('myfile')">

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

PS:

清除file框的内容

rush:xhtml;">

第二个案例

文件上传删除效果图:

刚开始:

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

点击按钮“删除”后:

实现代码

rush:xhtml;"> <Meta charset="utf-8"> 选择<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>