如何使用 JavaScript 上传文件？

如何使用 JavaScript 上传文件

要使用 JavaScript 上传文件，您可以利用以下步骤：

1. 使用表格数据：

   • 创建一个 FormData 对象来存储文件和附加数据。
   • 使用 formData.append() 将文件附加到表单数据。

2. 制作 XHR请求：

   • 创建 XMLHttpRequest (XHR) 对象。
   • 将请求方法设置为“POST”，并将 URL 设置为上传端点。
   • 将 XHR 对象的 body 属性设置为 formData .

3. 监听上传事件：

   • 将事件侦听器添加到 XHR 对象中，用于加载、进度和错误事件。
   • 在这些事件处理程序中，您可以处理上传状态和

示例代码：

const formData = new FormData();
const fileInput = document.getElementById('image-file');
const file = fileInput.files[0];

formData.append('photo', file);

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

xhr.addEventListener('load', () => {
  // Handle successful upload
});

xhr.addEventListener('progress', (e) => {
  // Monitor upload progress
});

xhr.addEventListener('error', (e) => {
  // Handle upload errors
});

纯 JavaScript：

如果你想使用纯 JavaScript 而不使用 XHR，你可以使用带有 FormData 的 fetch API .

示例：

let photo = document.getElementById("image-file").files[0];
let formData = new FormData();

formData.append("photo", photo);
fetch('/upload/image', { method: "POST", body: formData });

以上是如何使用 JavaScript 上传文件？的详细内容。更多信息请关注PHP中文网其他相关文章！