jQuery 妙招：Ajax POST 请求携带文件参数，轻松实现文件上传

前端

2023-03-10 04:22:01

文件上传神器：jQuery Ajax POST 请求

引言

在现代网络开发中，文件上传是一个必不可少的环节，从上传个人头像到共享大型文件，无一例外。jQuery Ajax POST 请求则为我们提供了实现这一需求的强大工具，让文件上传变得轻松便捷。

何为 Ajax

Ajax 全称异步 JavaScript 和 XML，它是一种允许网页与服务器进行异步通信的技术。使用 Ajax，我们可以在不重新加载整个页面，向服务器发送数据并接收响应，这为文件上传提供了完美的解决方案。

使用 jQuery 和 Ajax 发送文件

实现文件上传主要包含以下步骤：

创建 HTML 表单：

创建一个 HTML 表单，其中包含一个文件选择控件，允许用户选择要上传的文件。
jQuery 和 Ajax 发送 POST 请求：

使用 jQuery 和 Ajax 发送一个 POST 请求，并将文件作为参数传递给服务器。
服务器端处理文件：

在服务器端处理文件上传，通常是将文件保存到服务器上的指定位置。

代码示例

下面是具体实现代码：

HTML：

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

JavaScript：

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

    var formData = new FormData(this);

    $.ajax({
      url: "upload.php",
      type: "POST",
      data: formData,
      contentType: false,
      processData: false,
      success: function(data) {
        alert("文件上传成功！");
      },
      error: function(error) {
        alert("文件上传失败！");
      }
    });
  });
});

PHP：

<?php
if (isset($_FILES["file"])) {
  $fileName = $_FILES["file"]["name"];
  $fileTmpName = $_FILES["file"]["tmp_name"];
  $fileSize = $_FILES["file"]["size"];
  $fileType = $_FILES["file"]["type"];

  $uploadDir = "uploads/";
  $uploadFile = $uploadDir . $fileName;

  if (move_uploaded_file($fileTmpName, $uploadFile)) {
    echo "文件上传成功！";
  } else {
    echo "文件上传失败！";
  }
}
?>

扩展功能：文件上传进度条

为了让用户及时了解文件上传进度，我们可以添加一个文件上传进度条：

$.ajax({
  url: "upload.php",
  type: "POST",
  data: formData,
  contentType: false,
  processData: false,
  xhr: function() {
    var xhr = new window.XMLHttpRequest();
    xhr.upload.addEventListener("progress", function(e) {
      if (e.lengthComputable) {
        var percentComplete = (e.loaded / e.total) * 100;
        $("#progress-bar").attr("aria-valuenow", percentComplete);
        $("#progress-bar").css("width", percentComplete + "%");
      }
    }, false);
    return xhr;
  },
  success: function(data) {
    alert("文件上传成功！");
  },
  error: function(error) {
    alert("文件上传失败！");
  }
});