无需提交表单：使用 AJAX 在 HTML 中上传文件指南

2024-03-24 18:28:54

使用 AJAX 在 HTML 表单中上传文件：无需提交整个表单

简介

在 web 开发中，有时我们需要在不提交整个表单的情况下上传文件。AJAX 提供了一种简便的方法来实现这一点。本文将逐步指导您如何在 HTML 表单中使用 AJAX 上传文件，重点关注图像上传场景。

步骤 1：在 HTML 表单中添加文件上传字段

<form action="submit.php" method="POST" enctype="multipart/form-data">
  <input type="text" name="title" />
  <input type="text" name="description" />
  <input type="file" name="images" id="file" multiple />
</form>

添加 enctype="multipart/form-data" 属性，允许表单提交文件数据。
multiple 属性允许选择多个文件。

步骤 2：使用 JavaScript 发送文件

function save_img() {
  var data = new FormData();
  jQuery.each(jQuery('#file')[0].files, function (i, file) {
    data.append('file-' + i, file);
  });

  jQuery.ajax({
    url: '/admin/ajax/upload.php',
    data: data,
    cache: false,
    contentType: false,
    processData: false,
    type: 'POST',
    success: function (data) {
      alert(data);
    },
  });
}

将文件添加到 FormData 对象中。
使用 jQuery.ajax() 通过 AJAX 发送数据。
设置 cache、contentType 和 processData 选项，以防止 jQuery 自动处理数据。
当 AJAX 请求成功时，显示响应数据。

步骤 3：在 PHP 中处理文件上传

if (isset($_FILES['file'])) {
  // 获取文件信息
  $name = time() . '-' . $_FILES['file']['name'];
  $extension = strtolower(substr($name, strrpos($name, '.') + 1));
  $type = $_FILES['file']['type'];
  $size = $_FILES['file']['size'];
  $max_size = 20097152;
  $tmp_name = $_FILES['file']['tmp_name'];

  // 检查文件类型和大小
  if (in_array($extension, ['jpg', 'jpeg', 'png', 'gif']) && in_array($type, ['image/jpeg', 'image/jpg', 'image/png', 'image/gif']) && $size <= $max_size) {
    // 上传文件
    $location = '../../upload/images/';
    if (move_uploaded_file($tmp_name, $location . $name)) {
      // 调整图像大小（如果需要）
      $size = getimagesize($location . $name);
      if ($size[0] > 550) {
        // ...（参见代码）
      }

      // 保存图像信息到数据库（如果需要）
      // ...（参见代码）

      // 发送成功响应
      echo json_encode(['success' => true, 'link' => '/upload/images/' . $name]);
    } else {
      // 发送错误响应
      echo json_encode(['success' => false, 'error' => 'Unable to upload the file.']);
    }
  } else {
    // 发送错误响应
    echo json_encode(['success' => false, 'error' => 'Invalid file type or size.']);
  }
}