Question

我希望使用文件输入选择要显示在输入下方的图像，以便用户可以直观了解要上传的内容。我已经部分成功了，因为我的代码确实显示了图像，但是，它仅显示一个图像，而不显示所有选定的图像。我假设我需要使用遍历和遍历的次数与在输入中选择图像的次数相同，但是，我不确定如何将大量图像放入选择中。

任何提示将不胜感激

function displayInputImage(input) {
    var reader = new FileReader();
    var x = document.createElement("img");

    reader.onload = function(e) {
        x.setAttribute("src", e.target.result);
    }

    reader.readAsDataURL(input.files[0]);

    x.className = "new-avatar-picture";
    $('.upload-btn-wrapper').append(x);
}

$(".upload-input").change(function(){
    displayInputImage(this);
});

Answer 1

来自MDN：

所选文件由元素的HTMLInputElement.files属性返回，该属性是一个FileList对象，其中包含File对象的列表。 FileList的行为类似于数组，因此您可以检查其length属性以获取所选文件的数量。

使读取和预览代码可以处理多个文件输入

1 个答案: