AJAX异步无刷新请求上传

2023-09-04 18:07:41

本文将对AJAX异步无刷新请求上传进行详细讲解，希望能够帮助大家更好地理解和使用该技术。

AJAX异步无刷新请求上传是一种利用AJAX技术实现的文件上传方式，它允许用户在不刷新页面的情况下上传文件。相较于传统的表单提交方式，AJAX异步无刷新请求上传具有以下优点：

速度快：AJAX异步无刷新请求上传利用AJAX技术，可以实现快速的文件上传，无需等待整个页面刷新。
用户体验好：AJAX异步无刷新请求上传不会导致页面刷新，因此不会中断用户的操作，用户体验更佳。
安全性高：AJAX异步无刷新请求上传可以在服务器端对文件进行校验，防止恶意文件上传。

实现步骤

准备HTML表单

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

编写JavaScript代码

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

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

  const formData = new FormData(form);

  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 ($_FILES['file']['error'] === 0) {
  $uploaddir = './uploads/';
  $uploadfile = $uploaddir . basename($_FILES['file']['name']);

  if (move_uploaded_file($_FILES['file']['tmp_name'], $uploadfile)) {
    echo '文件上传成功！';
  } else {
    echo '文件上传失败！';
  }
} else {
  echo '文件上传失败！';
}

?>