Ajax 之文件上传

2023-09-27 05:19:24

Ajax 简介

Ajax（Asynchronous JavaScript and XML）是一种用于创建动态 Web 应用程序的技术。它允许 Web 应用程序与服务器进行异步通信，这意味着应用程序可以在不重新加载页面的情况下向服务器发送和接收数据。这使得 Web 应用程序能够更加响应用户交互，并提供更流畅的用户体验。

FormData 简介

FormData 是一个 JavaScript 接口，它允许您创建包含文件和其他数据的表单。FormData 对象可以轻松地与 XMLHttpRequest 对象一起使用来发送文件到服务器。

实现文件上传

要实现文件上传，我们需要创建一个 HTML 表单来收集用户选择的文件。表单中应包含一个文件输入元素（<input type="file">）和一个提交按钮。当用户选择文件并点击提交按钮时，我们将使用 JavaScript 来创建 FormData 对象并将其发送到服务器。

以下是一个简单的示例代码：

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

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

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

  const formData = new FormData(form);

  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload');
  xhr.send(formData);

  xhr.onload = () => {
    if (xhr.status === 200) {
      alert('文件上传成功！');
    } else {
      alert('文件上传失败！');
    }
  };
});