通过 Ajax 在 PHP 中上传文件

在现代 web 应用程序中，文件上传是一个很常见的需求。通过使用 Ajax 技术，可以异步上传文件到服务器，而不需要刷新整个页面。在本文中，我们将学习如何使用 Ajax 和 PHP 实现文件上传。

准备工作

在开始编写代码之前，我们需要一个 HTML 文件上传表单。以下是一个基本的文件上传表单示例：

<form id="file-upload-form" method="post" enctype="multipart/form-data">
  <input type="file" name="file" id="file">
  <input type="submit" value="上传">
</form>

在此表单中，我们使用了 enctype="multipart/form-data" 属性，以便能够上传文件。

处理上传请求

接下来，我们将编写 PHP 代码来处理文件上传请求。我们将使用 PHP 中的 move_uploaded_file() 函数将文件从临时目录移动到我们指定的目录。

<?php
if($_FILES["file"]["error"] > 0){
  echo "错误: " . $_FILES["file"]["error"] . "<br>";
} else {
  $file_name = $_FILES["file"]["name"];
  $file_tmp = $_FILES["file"]["tmp_name"];
  move_uploaded_file($file_tmp, "uploads/" . $file_name);
  echo "文件上传成功！";
}
?>

在这个简单的 PHP 脚本中，我们首先检查文件上传是否出错。如果没有错误，则从 $_FILES 超全局数组中获取文件名称和临时文件名。然后，我们使用 move_uploaded_file() 函数将文件移动到指定的目录。

处理 Ajax 请求

接下来，我们将使用 jQuery 库来处理 Ajax 请求。我们将处理表单提交事件，并向服务器发送 Ajax 请求。

$("#file-upload-form").submit(function(e) {
  e.preventDefault(); // 阻止默认的表单提交行为
  var formData = new FormData(this);
  $.ajax({
    url: "upload.php",
    type: "POST",
    data: formData,
    processData: false,
    contentType: false,
    success: function(response) {
      console.log(response);
      alert("文件上传成功！");
    },
    error: function(jqXHR, textStatus, errorThrown) {
      console.error(textStatus, errorThrown);
      alert("文件上传失败！");
    }
  });
});

在此 jQuery 代码中，我们首先阻止默认的表单提交行为，然后创建一个新的 FormData 对象来收集表单数据。然后，我们使用 $.ajax() 函数向服务器发送 Ajax POST 请求。需要注意的是，我们必须将 processData 和 contentType 选项设置为 false，以便正确处理 FormData 数据。当 Ajax 请求成功完成时，我们将在控制台中输出响应文本，并显示一个成功的警告框。如果出现错误，我们将在控制台中输出错误信息，并显示一个失败的警告框。

总结

本文介绍了如何使用 Ajax 和 PHP 实现文件上传。首先，我们创建了一个基本的 HTML 文件上传表单。然后，我们编写了一个简单的 PHP 脚本来处理上传请求。最后，我们使用 jQuery 库来处理 Ajax 请求。使用这些技术，我们能够轻松地在 web 应用程序中实现文件上传功能。