javascript - 有没有办法检查我在两个输入之间选择了哪个 input="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);

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

标签： javascripthtml

Answer 1

那是因为一个孩子不能有多个父母。您正在尝试插入同一个孩子。对于每一个，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>