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

这篇文章将为你详细介绍如何使用JavaScript实现动态添加和删除文件选择框的功能，这在文件上传场景中非常实用。

你是否曾遇到过这样的问题：在上传附件时，需要能够灵活地增加或删除文件选择框，以便一次性上传多个文件。这种功能虽然看似简单，但在实际开发中却常常因为浏览器兼容性问题而让人头疼。尤其是涉及到DOM操作的函数，如insertAdjacentHTML和removeChild，在不同的浏览器下表现可能会有所不同。

我们先来看一下具体的实现方式。这里涉及两个关键的函数：一个是删除文件选择框的函数removeFile，另一个是添加文件选择框的函数addFile。

removeFile函数的主要任务是删除指定的文件选择框。由于浏览器的兼容性差异，我们需要采取一些特殊的策略来确保删除操作能够顺利进行。具体来说，我们会获取文件选择框的父节点，然后通过逐层查找其父级元素，最后使用removeChild方法来删除整个文件选择框。这样的操作可以确保在IE和Firefox等浏览器中都能正常工作。

在页面的使用上，你可以创建一个按钮来触发addFile函数，然后在指定的div中显示添加的文件选择框。当用户点击这个按钮时，就会触发addFile函数，动态地在页面上添加一个新的文件选择框。每个文件选择框旁边都有一个删除按钮，点击这个按钮就可以调用removeFile函数，删除对应的文件选择框。

HTML部分：

```html

```

JavaScript部分 (`script.js`):

```javascript

function addFile() {

const container = document.getElementById('container'); // 获取容器元素

const fileInput = document.createElement('input'); // 创建文件输入元素

const deleteButton = document.createElement('input'); // 创建删除按钮元素

const wrapperDiv = document.createElement('div'); // 创建包裹div元素，用于包裹文件输入和删除按钮

fileInput.type = 'file'; // 设置文件输入类型为文件上传

fileInput.name = '选择文件'; // 设置文件输入框名称或标签（这里可以自定义）