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

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

有没有一种方法可以检查我在两个输入之间选择了哪个input =“ file”？

1 个答案: