前端直击！ajax上传图片存入指定文件夹并回显-全攻略

2023-07-21 09:01:26

使用 AJAX 实现无刷新图片上传

摘要

在现代网络应用程序中，提供高效且用户友好的体验至关重要。AJAX（异步 JavaScript 和 XML）是一项强大的技术，它使我们能够在不刷新整个页面的情况下与服务器通信。本文将深入探讨如何利用 AJAX 将图片上传到指定文件夹并实时显示结果。

第一步：设置环境

要开始使用 AJAX 图片上传，您需要：

支持 AJAX 的 Web 服务器（如 Apache 或 Nginx）
处理文件上传的 PHP 脚本
启用 jQuery 的 HTML 页面

第二步：创建 PHP 处理程序

在您的 Web 服务器上创建名为 "upload.php" 的 PHP 脚本。此脚本将处理上传的文件并将其存储在指定的文件夹中：

<?php
// 检查是否为文件上传请求
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
  // 获取上传的文件
  $file = $_FILES['file'];

  // 获取目标文件夹
  $target_dir = "uploads/";

  // 创建目标文件夹（如果不存在）
  if (!file_exists($target_dir)) {
    mkdir($target_dir, 0777, true);
  }

  // 获取新文件名
  $new_filename = time() . '_' . $file['name'];

  // 移动文件到目标文件夹
  move_uploaded_file($file['tmp_name'], $target_dir . $new_filename);

  // 返回上传文件路径
  echo $target_dir . $new_filename;
}
?>

第三步：编写 HTML 页面

创建名为 "index.html" 的 HTML 页面，它将包含文件上传控件和 AJAX 代码：

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      // 文件上传按钮事件
      $('#file-upload-button').on('click', function() {
        // 创建 FormData 对象
        var formData = new FormData();

        // 添加文件到 FormData
        formData.append('file', $('#file-upload-input')[0].files[0]);

        // 发送 AJAX 请求
        $.ajax({
          url: 'upload.php',
          type: 'POST',
          data: formData,
          contentType: false,
          processData: false,
          success: function(data) {
            // 显示上传文件路径
            $('#file-upload-result').html('图片已上传至：' + data);
          }
        });
      });
    });
  </script>
</head>
<body>
  <h1>AJAX 图片上传</h1>
  <input type="file" id="file-upload-input">
  <button type="button" id="file-upload-button">上传</button>
  <div id="file-upload-result"></div>
</body>
</html>