數據未追加到FormData對象

Question

我正在嘗試使用Jquery上的AJAX為一個圖像上傳系統上傳多個圖像。

但是，我無法讓FormData對象從文件輸入中獲取數據。 這是我的代碼：

HTML：

<form id="multiform" role="form" action="process.php" method="post" enctype="multipart/form-data">
    <div class="form-group">
        <div class="">
            <label for="picture">Upload Pictures</label>
            <input type="file" id="pic_upload_file" name="pics[]" multiple>
            <input type="button" id="pic_upload" name="pic_upload" value="Upload">
        </div>
    </div>
</form>

JQuery的

$('#pic_upload').click(function(e) {
    var formData = new FormData();
    formData.append("pics", file);
}); 

該對象已創建，我可以在控制台中看到它，但是我不知道如何將用戶文件輸入數據發送到該對象中以發送到php腳本。

有人可以幫忙嗎？

Answer 1

您有一個包含多個文件的文件輸入，因此必須獲取這些文件並將每個文件追加到formData對象中

$('#pic_upload').on('click', function(e) {
    var formData = new FormData(),
        files    = $('#pic_upload_file').get(0).files;

    $.each(files, function(i, file) {
        formData.append("pics_"  + i, file); 
    });

    $.ajax({
        url         : 'test.php',
        data        : formData,
        contentType : false,
        processData : false,
        type        : 'POST'
    });

});