极速上手 AJAX 上传图片，预览不等待！无论是博客更新、社交分享，还是电商购物，图片上传的需求可谓是无处不在。那么，如何在网页上实现图片上传的功能呢？今天，我们将为大家带来一个使用 AJAX 技术实现图片上传和预览的教程，让你轻松实现图片上传并即时预览上传进度和结果，一起来看看吧！ 1. 准备工作首先，你需要准备以下内容： * 一个 HTML 文件 * 一个 JavaScript 文件 * 一个 CSS 文件 * 一个图片文件 2. HTML 代码在 HTML 文件中，你需要创建一个文件上传表单，其中包含一个文件输入框和一个提交按钮。 ```html <!DOCTYPE html> <html> <head> AJAX 图片上传

前端

2023-07-03 23:32:34

使用 AJAX 实现图片上传和预览进度

上传图片时，获得即时反馈和进度指示非常重要。通过使用 AJAX 技术，我们可以实现无刷新图片上传，同时为用户提供有关上传进程的实时信息。在本教程中，我们将逐步指导您如何使用 AJAX 技术创建图片上传功能，包括进度条和上传结果预览。

什么是 AJAX？

AJAX（Asynchronous JavaScript and XML）是一种技术，它允许在不刷新整个网页的情况下，在客户端和服务器之间进行异步数据交换。它使我们能够创建更动态和响应式的 Web 应用程序。

使用 AJAX 实现图片上传

1. HTML 代码

首先，创建一个 HTML 表单，其中包含用于选择要上传的图片的文件输入框：

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

2. CSS 代码

接下来，创建一个 CSS 文件来设置进度条的样式：

#progress-bar {
  width: 0%;
  height: 20px;
  background-color: green;
}

3. JavaScript 代码

在 JavaScript 文件中，我们将编写代码来处理文件上传，显示进度条和预览上传结果：

// 获取 XMLHttpRequest 对象
const xhr = new XMLHttpRequest();

// 监听上传进度
xhr.upload.addEventListener("progress", function(e) {
  // 计算上传进度
  const progress = (e.loaded / e.total) * 100;

  // 更新进度条
  const progressBar = document.getElementById("progress-bar");
  progressBar.style.width = progress + "%";
});

// 监听上传完成
xhr.addEventListener("load", function() {
  // 解析服务器响应
  const data = JSON.parse(this.responseText);

  // 上传成功
  if (data.success) {
    // 显示上传结果（例如图像预览）
    const img = document.createElement("img");
    img.src = data.url;
    document.body.appendChild(img);
  } else {
    // 上传失败
    alert(data.error);
  }
});

// 提交文件上传表单
document.querySelector("form").addEventListener("submit", function(e) {
  e.preventDefault();

  // 获取文件
  const file = this.querySelector('input[type="file"]').files[0];

  // 创建 FormData 对象
  const formData = new FormData();

  // 将文件添加到 FormData 对象中
  formData.append("image", file);

  // 发送文件上传请求
  xhr.open("POST", "upload.php");
  xhr.send(formData);
});

4. PHP 代码

在 PHP 文件中，我们将处理上传的文件并返回上传结果：

<?php

// 获取上传的文件
$file = $_FILES['image'];

// 检查文件是否上传成功
if ($file['error'] === 0) {
  // 移动文件到指定位置
  move_uploaded_file($file['tmp_name'], 'uploads/' . $file['name']);

  // 返回上传成功的信息
  echo json_encode(array('success' => true, 'url' => 'uploads/' . $file['name']));
} else {
  // 返回上传失败的信息
  echo json_encode(array('success' => false, 'error' => '上传失败'));
}

?>