javascript - 然后 jquery 并获取 src - 将图像上传到服务器

Question

我想立即将图像文件列表传递到服务器。

这是我的代码，其中函数 srcToFile 用于创建一个新文件作为图像。

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 返回的所有 Promise 放入一个数组中，然后使用 $.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(...)