javascript - AJAX上传文件为什么要用FormData？

Question

我有一个用户可以上传文件的表单:

<form enctype="multipart/form-data method="POST" id="cool-form-id">
    <input type="file" id="file" name="file">
</form>

我正在尝试使用 AJAX 请求从此表单上传文件:

    $.ajax({
          url: '/path/to/upload/',
          data: $("#cool-form-id").serialize(),
          processData: false,
          contentType: false,
          type: 'POST',
          success: function(data) {
            alert(data)
          }
      });

如果我检查由 $("#cool-form-id") 选择器获得的对象，我会看到有人选择文件的表单和输入字段，但是在 serialize() 之后这个输入消失了(其他输入此表单中的字段按预期序列化。)

      var formData = new FormData($("#cool-form-id")[0]);

      $.ajax({
          url: '/path/to/upload/',
          data: formData,
          processData: false,
          contentType: false,
          type: 'POST',
          success: function(data) {
            alert(data)
          }
      });

我能够通过使用 FormData 对象传递表单信息(见上文)来解决这个问题，但我无法弄清楚为什么我的原始计划不起作用(我的理解是 FormData 只是创建一系列键/值对)。

大多数引用 FormData 的问题都不是最新的，许多只是提供了一个工作示例。

我很好奇是否有人可以阐明以下任何或所有内容:

1) 为什么不能对"file"类型的输入表单数据进行序列化()？

2) FormData 有什么不同之处导致它在这种情况下工作？

3) FormData 是否仍然是您上传文件的唯一/最佳选择(假设您不想使用 iFrame)？

Answer 1

Why should FormData be used when uploading a file via AJAX?

因为你不能以任何其他方式做到这一点(除了 iframe hack)

1) Why can you not serialize() the form data for an input of type "file"?

因为:

• application/x-www-form-urlencoded 编码没有本地方式来表达文件
• 文件输入的值没有给出文件内容

serialize 可以被重写为，例如，使用 FileList API 读取文件，然后将它们进行 base64 编码到 application/x-www-form-urlencoded字符串(它可以，但 jQuery 还没有这样做)，然后任何读取数据的服务器端代码都必须解码 base64 数据。

2) What does FormData do differently that causes it to work in this scenario?

它创建一个多部分/表单数据格式的主体并从文件输入中读取文件。

3) Is FormData still the only/best option for you to upload a file (assuming you don't want to use an iFrame)?

这是唯一明智的选择。