使用 FormData jQuery 发送多个文件

在 Web 开发中，经常需要向服务器发送多个文件。对于这种需求，我们可以使用 FormData 和 jQuery 的 AJAX 请求来实现。本文将介绍如何使用 FormData jQuery 发送多个文件到服务器。

1.创建 HTML 页面

首先在 HTML 页面中创建一个文件上传表单：

<form id="myForm" enctype="multipart/form-data">
  <input type="file" name="file1">
  <input type="file" name="file2">
  <button type="submit">上传</button>
</form>

2.使用 FormData 上传文件

在 jQuery 中，我们可以使用 FormData 类来创建一个包含表单数据的对象，然后将其发送到服务器。以下是示例代码：

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

  var formData = new FormData(this);

  $.ajax({
    url: '/upload',
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    success: function(response){
      // 处理响应数据
    },
    error: function(xhr, status, error){
      // 处理错误
    }
  });
});

在上面的代码中，我们首先创建了一个 FormData 对象并将表单数据传递给它。然后，我们使用 jQuery 的 AJAX 方法将其发送到服务器。在 AJAX 请求中，我们设置了 processData 和 contentType 为 false，以告诉 jQuery 不要对 FormData 对象进行序列化，并使用默认的 multipart/form-data 编码来发送数据。

3.处理服务器端代码

接下来，我们需要在服务器端处理上传的文件。具体操作因服务器端不同而异。在 PHP 中，我们可以使用 $_FILES 变量来访问上传的文件数据。以下是示例代码：

<?php
$uploads_dir = '/path/to/uploads';

foreach ($_FILES["file1"]["error"] as $key => $error) {
    if ($error == UPLOAD_ERR_OK) {
        $tmp_name = $_FILES["file1"]["tmp_name"][$key];
        $name = $_FILES["file1"]["name"][$key];
        move_uploaded_file($tmp_name, "$uploads_dir/$name");
    }
}

foreach ($_FILES["file2"]["error"] as $key => $error) {
    if ($error == UPLOAD_ERR_OK) {
        $tmp_name = $_FILES["file2"]["tmp_name"][$key];
        $name = $_FILES["file2"]["name"][$key];
        move_uploaded_file($tmp_name, "$uploads_dir/$name");
    }
}
?>

在上述代码中，我们根据上传的文件名和临时文件名将文件移动到指定的目录中。如果文件上传成功，则 error 的值为 UPLOAD_ERR_OK。如果上传失败，则根据 error 值进行相应的处理。

4.总结

本文介绍了如何使用 FormData jQuery 发送多个文件到服务器，并展示了一个基于 PHP 的服务器端代码示例。如果你正在开发一个需要上传多个文件的 Web 应用，那么本文将为你提供代码范例和参考。