JS中同一个ID的多个文件类型输入框无法工作

在HTML中，每个元素都应该有唯一的ID。然而，在实际开发中，有时可能需要使用相同的ID命名多个文件类型输入框，这会导致JS无法正确地识别这些元素。

解决这个问题的方法之一是使用类名来代替ID。将相同类型的文件输入框分配给同一个类，然后使用JS选择该类的所有元素进行操作。

HTML代码示例：

<label>上传文件:</label>
<input type="file" class="file-input" name="file1">
<input type="file" class="file-input" name="file2">
<input type="file" class="file-input" name="file3">

JS代码示例：

var fileInputs = document.querySelectorAll('.file-input');
for (var i = 0; i < fileInputs.length; i++) {
  var fileInput = fileInputs[i];
  fileInput.addEventListener('change', function() {
    console.log('文件已上传: ' + this.value);
  });
}

在这里，我们使用querySelectorAll()方法来选择所有带有“file-input”类的元素，并将它们存储在一个名为“fileInputs”的变量中。然后，我们迭代每个元素，并为每个元素添加一个“change”事件监听器来监听文件上传事件。