使用 Ajax 和 FormData 实现文件上传及文本数据提交的完整教程

本文旨在解决在使用 Ajax 和 FormData 进行文件上传时，遇到的 $_POST 和 $_FILES 为空的问题。通过详细的代码示例和解释，我们将展示如何正确地构建 FormData 对象，并通过 Ajax 将文件和文本数据发送到服务器端，同时避免常见的错误配置，确保数据能够成功地被 PHP 脚本接收和处理。

在使用 Ajax 进行文件上传时，FormData 对象是一个强大的工具，它允许我们模拟 HTML 表单提交，并包含文件和其他表单数据。然而，如果配置不正确，可能会导致服务器端无法接收到数据，表现为 $_POST 和 $_FILES 为空。本文将详细介绍如何正确地使用 FormData 对象，并通过 Ajax 将文件和文本数据上传到服务器。

HTML 表单结构

首先，我们需要一个 HTML 表单，用于收集用户输入的文件和文本数据。关键在于正确设置 enctype 属性为 "multipart/form-data"，这是文件上传的必要条件。

<form name="usrupload" method="POST" enctype="multipart/form-data">
  <label class="form-label text-start">Enter your Name
    <input class="form-control" name="name" type="text" placeholder="John" />
  </label>

  <label class="form-label">Title
    <input class="form-control" type="text" name="title" placeholder="Operator" />
  </label>

  <label class="form-label">Your Cute Photo (format: jpg and png only, less than 500kb)
    <input class="form-control"  name="file" type="file" />
  </label>

  <input type='button' name='bttn' value='Submit' />
</form>

注意事项：

• 确保每个 input 元素都有唯一的 name 属性，这对于服务器端区分不同的输入字段至关重要。
• 使用 zuojiankuohaophpcnlabel> 标签将文本描述与输入框关联，提高用户体验和可访问性。

JavaScript (jQuery) 代码

接下来，我们使用 JavaScript 和 jQuery 来处理表单提交和 Ajax 请求。

码上飞

码上飞（CodeFlying） 是一款AI自动化开发平台，通过自然语言描述即可自动生成完整应用程序。

138

查看详情

const form = document.forms.usrupload;

form.bttn.onclick = () => {
  var form_data = new FormData(form);
  $.ajax({
    type: 'POST',
    dataType: 'text',
    cache: false,
    contentType: false,
    processData: false,
    url: 'save_data.php',
    data: form_data,
    success: function(data) {
      alert(data)
      window.location = 'account.php';
    }
  });
}

关键点解释：

1. FormData(form): 直接将表单元素作为参数传递给 FormData 构造函数。这会自动收集表单中的所有字段和文件数据。
2. contentType: false 和 processData: false: 这两个选项对于文件上传至关重要。contentType: false 告诉 jQuery 不要设置 Content-Type header，让浏览器根据 FormData 的内容自动设置。processData: false 告诉 jQuery 不要将 data 转换为字符串。
3. data: form_data: 直接将 FormData 对象作为 data 选项的值传递给 Ajax 请求。

PHP 服务器端代码

最后，我们需要 PHP 代码来接收和处理上传的文件和文本数据。

<?php

$name = $_POST['name'];
$title = $_POST['title'];
$file = $_FILES['file'];

// 处理文件上传
$filename = $file['name'];
$tmp_name = $file['tmp_name'];
$error = $file['error'];

if ($error === UPLOAD_ERR_OK) {
  // 移动文件到指定目录
  $destination = 'uploads/' . $filename;
  move_uploaded_file($tmp_name, $destination);

  echo "File uploaded successfully!";
} else {
  echo "File upload failed with error code: " . $error;
}

// 其他处理逻辑，例如将数据保存到数据库

?>

要点说明：

• 使用 $_POST 数组访问文本数据，例如 $_POST['name'] 和 $_POST['title']。
• 使用 $_FILES 数组访问上传的文件信息，例如 $_FILES['file']['name']（文件名）和 $_FILES['file']['tmp_name']（临时文件路径）。
• 务必检查 $_FILES['file']['error'] 的值，以确保文件上传成功。
• 使用 move_uploaded_file() 函数将临时文件移动到指定目录。

常见问题和解决方案

• $_POST 和 $_FILES 为空： 检查 HTML 表单的 enctype 属性是否设置为 "multipart/form-data"，并确保 Ajax 请求的 contentType 和 processData 选项设置为 false。
• 文件上传失败： 检查 $_FILES['file']['error'] 的值，并根据错误代码进行排查。常见的错误包括文件大小超过限制、文件类型不符合要求等。
• JavaScript 错误： 确保 jQuery 库已正确加载，并且 JavaScript 代码没有语法错误。

总结

通过本文的教程，您应该能够正确地使用 Ajax 和 FormData 对象进行文件上传，并成功地在服务器端接收和处理数据。关键在于正确配置 HTML 表单、JavaScript 代码和 PHP 服务器端代码，并注意避免常见的错误。记住，FormData 对象是一个强大的工具，可以简化文件上传的流程，提高用户体验。

以上就是使用 Ajax 和 FormData 实现文件上传及文本数据提交的完整教程的详细内容，更多请关注php中文网其它相关文章！