多个用户使用 javascript 上传图像字段

Question

所以我有一个上传图片按钮，这样用户就可以将图片从他们的计算机上传到我正在处理的网站，并且图片会显示在页面上。 我需要帮助弄清楚如何制作多个这些图像上传字段，以允许用户将不同的图像上传到每个字段。 到目前为止，我只能让一个人工作。 这是我的代码：

<p><input type="file" accept="image/*" name="image" id="file" onchange="loadFile(event)" style="display: none;"></p>
<p><label for="file" style="cursor: pointer;">Upload Image</label></p>
<p><img id="output" width="200"></p>

<script>
var loadFile = function(event) {
    var image = document.getElementById('output');
    image.src = URL.createObjectURL(event.target.files[0]);
};
</script>

Answer 1

尝试使用“多个”属性。

HTML

<input type="file" id="files" name="files" multiple>

JS

var files = document.getElementById("files").addEventListener("change", function(e) {
  console.log(e.target.files)
})

那是你想要的还是我理解错了？

Answer 2

我不是 100% 确定我理解正确你的问题，但如果你想添加多个add buttons ，你应该使用 JS 到 select 所有输入并正确附加你的事件监听器：

 const inputs = document.querySelectorAll("[name=image]") const outputs = document.querySelectorAll(".output") inputs.forEach((i, idx) => { const o = outputs[idx] i.onchange = e => { const file = e.target.files[0] const url = URL.createObjectURL(file) o.src = url } })

 <p><input type="file" accept="image/*" name="image" id="file1" style="display: none;"></p> <p><label for="file1" style="cursor: pointer;">Upload Image</label></p> <p><img class="output" width="200"></p> <p><input type="file" accept="image/*" name="image" id="file2" style="display: none;"></p> <p><label for="file2" style="cursor: pointer;">Upload Image</label></p> <p><img class="output" width="200"></p> <p><input type="file" accept="image/*" name="image" id="file3" style="display: none;"></p> <p><label for="file3" style="cursor: pointer;">Upload Image</label></p> <p><img class="output" width="200"></p> <p><input type="file" accept="image/*" name="image" id="file4" style="display: none;"></p> <p><label for="file4" style="cursor: pointer;">Upload Image</label></p> <p><img class="output" width="200"></p>