jQuery文件上传表单提交：告别serialize函数

2024-03-26 09:30:38

使用 jQuery 提交文件上传表单：超越序列化

简介

在使用 jQuery 提交表单时，我们经常使用 serialize() 函数将表单数据转换为字符串，以便发送到服务器。然而，当表单包含文件上传字段时，事情就会变得棘手。文件上传字段包含二进制数据，无法通过序列化传递。本文将探讨如何使用 jQuery 和 FormData 对象解决这一问题，从而顺利提交文件上传表单。

jQuery 序列化与文件上传

jQuery 的 serialize() 函数无法处理文件上传字段。它只能将表单元素值转换为字符串，而文件上传字段需要以二进制格式发送。这会导致服务器无法访问上传的文件。

FormData：解决文件上传序列化

FormData 对象是解决这一问题的关键。它允许我们构建包含文件和其他数据的表单数据。我们可以使用 FormData 对象将文件上传字段与其他表单元素值一起发送到服务器。

使用 FormData 提交文件上传表单

创建 FormData 对象

const formData = new FormData();

将文件添加到 FormData 对象

formData.append('file', fileInput.files[0]);

使用 FormData 对象进行 AJAX 请求

$.ajax({
  type: "POST",
  cache: false,
  url: "blah",
  data: formData,
  processData: false,
  contentType: false,
  success: function(data) {
    // ...
  }
});

需要注意的是，在 AJAX 请求中，processData 和 contentType 选项必须设置为 false，以允许 FormData 对象原样发送。

服务器端处理文件上传

如果服务器端使用 PHP 接收文件，可以使用 $_FILES 数组访问上传的文件。

示例代码

<form id="form" action="blah" method="post" enctype="multipart/form-data">
  <input type="text" name="name">
  <input type="file" name="file">
  <input type="submit" value="Submit">
</form>

$('#form').submit(function(e) {
  e.preventDefault();

  const formData = new FormData(this);

  $.ajax({
    type: "POST",
    cache: false,
    url: "blah",
    data: formData,
    processData: false,
    contentType: false,
    success: function(data) {
      // ...
    }
  });
});