使讀取和預覽代碼可以處理多個文件輸入

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屬性以獲取所選文件的數量。