利用FormData实现AJAX文件上传的妙招

2023-09-07 15:39:36

在当今网络应用中，文件上传功能已成为不可或缺的一部分。无论是提交简历、上传图片还是分享文档，我们需要一种简单有效的方式在客户端和服务器之间传输文件。在这篇文章中，我们将介绍如何利用FormData对象实现AJAX文件上传功能，并提供完整的HTML、CSS、JavaScript和后端代码。

前端准备

HTML基础设置

首先，我们需要一个基本的HTML页面作为前端框架。在这个页面中，我们将添加一个表单来收集用户要上传的文件。表单中需要包含一个元素，其type属性设置为"file"，以便用户选择要上传的文件。

<form id="file-upload-form">
  <input type="file" name="file" id="file-input">
  <input type="submit" value="上传文件">
</form>

CSS界面优化

接下来，我们使用CSS来优化表单的界面。这可以包括调整表单的布局、设置按钮样式和美化文本等。

#file-upload-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#file-input {
  margin-bottom: 10px;
}

input[type="submit"] {
  background-color: #008CBA;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

JS利用FormData对象和AJAX进行上传

现在，我们进入关键步骤：使用JavaScript和AJAX实现文件上传功能。我们需要做的第一件事是创建一个FormData对象，该对象将存储用户选择的文件。然后，我们将使用AJAX将FormData对象发送到服务器。

const form = document.getElementById('file-upload-form');

form.addEventListener('submit', (e) => {
  e.preventDefault();

  const formData = new FormData();
  formData.append('file', document.getElementById('file-input').files[0]);

  const xhr = new XMLHttpRequest();
  xhr.open('POST', 'upload.php', true);
  xhr.onload = () => {
    if (xhr.status === 200) {
      alert('文件上传成功！');
    } else {
      alert('文件上传失败！');
    }
  };

  xhr.send(formData);
});

后端实现

在后端，我们需要编写一个PHP脚本来接收用户上传的文件并将其存储在指定路径中。同时，我们需要提供删除文件的功能。

<?php

if (isset($_FILES['file'])) {
  $errors = array();

  $file_name = $_FILES['file']['name'];
  $file_size = $_FILES['file']['size'];
  $file_tmp = $_FILES['file']['tmp_name'];
  $file_type = $_FILES['file']['type'];
  $file_ext = strtolower(end(explode('.', $file_name)));

  $extensions = array("jpeg", "jpg", "png", "gif");

  if (in_array($file_ext, $extensions) === false) {
    $errors[] = "此文件类型不允许上传。";
  }

  if ($file_size > 2097152) {
    $errors[] = "文件大小不能超过2MB。";
  }

  if (empty($errors)) {
    move_uploaded_file($file_tmp, "uploads/" . $file_name);
    echo "文件上传成功！";
  } else {
    foreach ($errors as $error) {
      echo $error . "<br>";
    }
  }
}

if (isset($_GET['file_name'])) {
  unlink("uploads/" . $_GET['file_name']);
  echo "文件删除成功！";
}

?>