AJAX 上传图片 - JavaScript

AJAX 是一种无需页面重载的技术，可以异步地与服务器进行通信。使用 AJAX 可以让图片上传更加流畅和快捷。

准备工作

要使用 AJAX 上传图片，我们需要准备以下材料：

• 一个包含上传表单的 HTML 文件
• 基于 jQuery 的 AJAX 脚本
• 后台服务（如 PHP）来处理上传请求并保存图片

HTML 表单

HTML 表单可以使用标准的 form 和 input 标记来创建，如下所示：

<form method="post" enctype="multipart/form-data">
  <input type="file" name="file" />
  <button type="submit">Upload</button>
</form>

这将显示一个选择文件的控件和一个上传按钮，允许用户选择文件并将其上传到服务器。

AJAX 脚本

为了使用 AJAX 进行图片上传，我们需要一个基于 jQuery 的脚本，以便异步提交表单数据。

$(document).ready(function() {

  $('form').submit(function(e) {
  
    e.preventDefault(); // 阻止表单提交
    
    var formData = new FormData(this);
    
    $.ajax({
      url: 'upload.php',
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      success: function(response) {
        console.log(response);
      },
      error: function(jqXHR, textStatus, errorThrown) {
        console.error(textStatus, errorThrown);
      }
    });
    
  });

});

这个脚本将捕获表单提交事件，并使用 AJAX 异步提交表单数据。 FormData 对象用于将表单数据包装成类似于 multipart/form-data 的格式，然后将其发送给服务器。

processData 属性设置为 false 可以告诉 jQuery 不要处理 FormData 对象，而是将其发送给服务器。 contentType 属性设置为 false 可以告诉 jQuery 不要设置 content-type 请求头，让浏览器自动识别正确的类型。

PHP 后台服务

在服务器上，我们需要一个 PHP 后台服务来处理上传请求并保存图片。以下是一个简单的 PHP 脚本，用于接收上传的图像文件并将其保存到服务器上的指定位置。

<?php

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['file'])) {
  
  $file = $_FILES['file'];
  
  if ($file['error'] === UPLOAD_ERR_OK) {
    
    $fileName = $file['name'];
    $fileTemp = $file['tmp_name'];
    $fileType = $file['type'];
    $fileSize = $file['size'];
    
    // 验证文件类型和大小，然后将文件保存到指定目录
    // ...
    
    echo "Upload success";
    exit;
  }
}

echo "Upload failed";

这个脚本将验证上传的文件类型和大小，并将文件保存到指定目录。

经过以上步骤，即可实现基于 AJAX 的图片上传。

总结

使用 AJAX 可以使图片上传变得更加流畅和高效。我们可以通过通过基于 jQuery 的 AJAX 脚本将表单数据异步地提交给服务器，然后在后台使用 PHP 等服务进行文件处理和保存。