jquery then srcをフェッチしてサーバに画像をアップロード

Question

画像ファイルのリストを一度にサーバに渡したいと思います。

var formData = new FormData(); 

// Iterate all td's in second column 
$("#table-image tbody tr:not(:first-child)").each(function (index, value) { 
    var blob = value.cells[4].innerText; 
    var fileName = (index + 1) + ".jpg"; 
    srcToFile(blob, fileName, "image/jpeg") 
    .then(function (file) { 
     formData.append("file", file); 
     alert(formData.getAll("file").length); ** // I know that I can use aJax jquery to pass one by one at here** 
    }, function (error) { 
     // 
    }); 
}); 

function srcToFile(src, fileName, mimeType) { 
    return (fetch(src) 
     .then(function (res) { return res.arrayBuffer(); }) 
     .then(function (buf) { return new File([buf], fileName, { type: mimeType }); }) 
    ); 
} 

この場合、formDataはどのように使用できますか？

ありがとうございました！

Answer 1

srcToFileによって返されたすべての約束事を配列に入れてから、$.when()を使用してすべてを待ちます。

var promises = $("#table-image tbody tr:not(:first-child)").map(function (index, value) { 
    var blob = value.cells[4].innerText; 
    var fileName = (index + 1) + ".jpg"; 
    return srcToFile(blob, fileName, "image/jpeg") 
    .then(function (file) { 
     formData.append("file[]", file); 
    }, function (error) { 
     // 
    }); 
}).get(); 
$.when(promises).then(function() { 
    alert(formData.getAll("file[]").length); 
    return $.ajax({ 
     url: "yourURL", 
     type: "post", 
     processData: false, 
     data: formData 
    }); 
}).then(...)