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

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

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

具体两个函数是这样的：

删除文件选择框 function removeFile(id) { var new_tr = id.parentNode; try { //new_tr.removeNode(true); // just ie,not w3c;

  // other idea
  var tmp = new_tr.parentNode;
  // 为了在ie和firefox下都能正常使用,就要用另一个<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>代替,最取上一层的父结点,然后remove.
  tmp.removeChild(new_tr);

 } catch(e) {}

}

//添加文件选择框
function addFile(id)
{
var str = '

'
insertHtml("beforeend",document.getElementById(id),str);
}

页面上这样引用：

添加附件(Add)" onclick="addFile('myfile')">

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