javascript - 为 <input type=file multiple> 中的每个文件创建 FormData 实例

Question

我正在尝试使用具有 multiple 属性的输入文件并拆分 formData，因此我将为多文件元素中的每个文件创建一个 formData isnatce。

HTML

<input type="file" name="file" multiple></label>

JS

new FormData(formElement) // <--- Need to have this for each file selected

我需要这个，因为我使用的是 Cloudinary API，它们一次只接受一个文件，所以我需要发送多个 Ajax 请求，对于每个请求，我都需要 formData 实例文件已选择，但问题是，FormData 接受 how form 元素作为参数，我无法分隔文件。

DEMO PAGE

Answer 1

您可以使用 $.when() , $.map()附加每个 File的 <input type="file"> FileList到新FormData实例，然后调用 $.ajax()对于每个 FormData()实例。

注意，已替换 .on()对于 onsubmit事件属性。没有required属性或默认 .value设置 name="cloud_name"和 name="upload_preset" <input type="text">元素 .value form 时可能为空字符串submit事件发生。

$(function() {
  var form = $("form");
  form.on("submit", function(e) {
    e.preventDefault();
    var cloudName = $('input[name="cloud_name"]').val(),
      presetName = $('input[name="upload_preset"]').val(),
      URL = "https://api.cloudinary.com/v1_1/" + cloudName + "/image/upload",
      input = form.find("[name=file]");

    $.when.apply($, $.map(input[0].files, function(file, index) {
      var data = new FormData(form[0]);
      data.append("upload_preset", file, file.name);
      return $.ajax({
        type: 'post',
        url: URL,
        data: data,
        processData: false,
        contentType: false,
        cache: false
      });
    }))
    .then(function(response) {
      console.log(response)
    })
    .catch(function(err) {
      console.log(err)
    })
  })
})

plnkr http://plnkr.co/edit/7l0obsusqXVlommdd49L?p=preview