然后使用jQuery并获取src-将图像上传到服务器

Question

I want to pass a list of image files to the server at once.

This is my code, where the function srcToFile is for creating a new file as image.

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 }); })
    );
}

How can I use formData in this case?

Answer 1

Put all the promises returned by srcToFile into an array, then use $.when() to wait for all of them.

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(...)