從多個輸入獲取多個文件上傳並將它們附加到表單數據

Question

我的 HTML 頁面中的表單具有以下 3 個字段，可用於上傳 3 個單獨的文件。

<div class="form-group">
            <label>Important Property Documents Upload</label>
            <input type="file" id="update_importantdocupload" name="update_importantdocupload" class="form-control" placeholder="Upload a Compressed file will necessary documents included." required>
        <div class="form-group">
            <label>Important Property Documents Upload</label>
            <input type="file" id="add_importantdocupload" name="add_importantdocupload" class="form-control file_upload" placeholder="Upload a Compressed file will necessary documents included." required>
        </div>
        
        <div class="form-group">
            <label>Property Cover Image</label>
            <input type="file" id="add_propertycoverimage" name="add_propertycoverimage" class="form-control file_upload" placeholder="Upload a Cover Image" required>
        </div>
        
        <div class="form-group">
            <label>Other Property Images</label>
            <input type="file" id="add_propertyotherimages" name="add_propertyotherimages" class="form-control file_upload" placeholder="Compress All Property Images and Upload" required>
        </div>

上傳文件后，我使用以下 Javascript 代碼獲取上傳的文件並將它們附加到表單數據的其余部分。 （必須使用類，因為只起草了 1 個 API 代碼來上傳文件）

    let formData = new FormData();

for (let file of document.getElementsByClassName('file_upload').files) {
    formData.append("files", file);
}

但這會引發一個錯誤，即這是不可迭代的。

解決此問題的最佳方法是什么？

提前致謝！

Answer 1

getElementsByClassName返回具有所有給定類名的所有子元素的類數組對象。 ^參考

重要的關鍵字是array-like ......要迭代它，您需要一個真正的數組。 所以你可以使用Array.from() 。

然后，對於每個元素，您需要 files 數組的第一個文件。

我還使用FormData.getAll()來控制台記錄結果...

 document.getElementById("test").addEventListener("click", function() { let formData = new FormData(); for (let inputElement of Array.from(document.getElementsByClassName('file_upload'))) { formData.append("files", inputElement.files[0]); } console.log(formData.getAll("files")) })

 <div class="form-group"> <label>Important Property Documents Upload</label> <input type="file" id="update_importantdocupload" name="update_importantdocupload" class="form-control" placeholder="Upload a Compressed file will necessary documents included." required> <div class="form-group"> <label>Important Property Documents Upload</label> <input type="file" id="add_importantdocupload" name="add_importantdocupload" class="form-control file_upload" placeholder="Upload a Compressed file will necessary documents included." required> </div> <div class="form-group"> <label>Property Cover Image</label> <input type="file" id="add_propertycoverimage" name="add_propertycoverimage" class="form-control file_upload" placeholder="Upload a Cover Image" required> </div> <div class="form-group"> <label>Other Property Images</label> <input type="file" id="add_propertyotherimages" name="add_propertyotherimages" class="form-control file_upload" placeholder="Compress All Property Images and Upload" required> </div> </div> <br> <button id="test">Append to FormData</button>