javascript - 有没有办法检查我在两个输入之间选择了哪个输入 ="file"？

Question

我有两个 file="input"字段，带有一个输出字段，其中一个是:

<input type="file" name="files[]" id="files" multiple accept="image/jpeg, image/png, image/gif,"><br />
<output id="Filelist" style="max-width: 630px;"></output>

另一个是:

<input type="file" name="files[]" id="files2" multiple accept="image/jpeg, image/png, image/gif,"><br />
<output id="Filelist2" style="max-width: 630px;"></output>

现在，我尝试在 JavaScript 中执行一个方法，但该方法的执行取决于我选择的输入字段。

document.getElementById('Filelist').insertBefore(ul, null);
document.getElementById('Filelist2').insertBefore(ul, null);

我已经应用了上面的代码，但它只执行

document.getElementById('Filelist2').insertBefore(ul, null);

但是，当我删除上述行时，它会执行 document.getElementById('Filelist').insertBefore(ul, null);

有没有办法让我找出正在使用哪个输入，以便我可以将其分配给变量？

Answer 1

这是因为一个 child 不能有多个 parent 。您尝试插入同一个 child 。对于每个 insertBefore，您需要创建一个单独的 ul。为了解决您的问题，您可以使用 document.querySlectorAll 并迭代它，并在每次迭代期间创建一个新的 ul 并添加插入它

document.querySelectorAll('.output').forEach(function(item) {
  var ul = document.createElement('ul');
  item.insertBefore(ul, null);

})

ul {
  border: 1px solid red;
  height: 20px;
}

<input type="file" name="files[]" id="files" multiple accept="image/jpeg, image/png, image/gif,"><br />
<output id="Filelist" class='output' style="max-width: 630px;"></output>


<input type="file" name="files[]" id="files2" multiple accept="image/jpeg, image/png, image/gif,"><br />
<output id="Filelist2" class='output' style="max-width: 630px;"></output>