前端开发必备：一步一步学会利用ajax实现图片上传

前端

2023-06-06 03:29:02

用 AJAX 实现图片上传：从头到尾的指南

在现代网络开发中，用户交互是至关重要的。其中一项常见的交互就是上传文件，尤其是图片。上传图片使我们能够创建相册、产品目录和在线商店等各种应用程序。

使用 AJAX（异步 JavaScript 和 XML）进行图片上传是一种简单高效的方法。本指南将引导您完成整个过程，从前端准备到后端处理，逐步演示如何实现此功能。

1. 前端准备

首先，让我们从前端开始。我们需要使用 HTML 和 JavaScript 来创建一个图片上传表单，并使用 AJAX 将图片数据发送到后端。

HTML 代码

创建一个 HTML 表单，其中包含一个文件输入字段和一个提交按钮：

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

JavaScript 代码

接下来，我们添加 JavaScript 代码来处理表单提交。它将创建一个 FormData 对象，其中包含上传的图片，然后使用 XMLHttpRequest 发送到后端：

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

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

  const formData = new FormData();
  const image = form.querySelector('input[type=file]').files[0];
  formData.append('image', image);

  const xhr = new XMLHttpRequest();
  xhr.open('POST', 'upload.php');
  xhr.setRequestHeader('Content-Type', 'multipart/form-data');
  xhr.send(formData);

  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // 处理响应数据
    }
  };
});

2. 后端处理

接下来，是后端处理的部分。我们需要使用 PHP 和 MySQL 数据库来处理上传的图片数据。

PHP 代码

在后端，我们将处理上传的图片，将其保存到指定目录并将其信息保存到数据库中：

<?php

$conn = new mysqli('localhost', 'username', 'password', 'database');

if ($conn->connect_error) {
  die('数据库连接失败：' . $conn->connect_error);
}

$image = $_FILES['image'];

$filename = $image['name'];
$filetype = $image['type'];
$tmp_name = $image['tmp_name'];
$size = $image['size'];

if (!empty($image) && $size > 0 && in_array($filetype, ['image/jpeg', 'image/png', 'image/gif'])) {
  $destination = 'uploads/' . $filename;
  move_uploaded_file($tmp_name, $destination);

  $stmt = $conn->prepare('INSERT INTO images (filename, filetype, size) VALUES (?, ?, ?)');
  $stmt->bind_param('sss', $filename, $filetype, $size);
  $stmt->execute();

  $conn->close();

  echo '图片上传成功！';
} else {
  echo '图片上传失败！';
}

?>