如何使用 JavaScript 将文件发送到服务器并监控其上传进度？-js教程-PHP中文网

如何使用 JavaScript 将文件发送到服务器并监控其上传进度？

DDD

发布： 2024-11-10 09:36:02

原创

205 人浏览过

How to send a file to a server and monitor its upload progress using JavaScript?

在 JavaScript 中发送文件

假设您有一个 HTML 元素代表一个让用户选择文件的按钮。单击按钮并选择文件后，其名称存储在 document.getElementById("image-file").value 中。如果服务器支持 URL“/upload/image”处的多部分 POST 请求，那么如何将文件发送到该端点？此外，如何监控上传进度？

使用 Fetch 的纯 JavaScript

您可以使用 fetch API 和可选的等待-try-catch 处理：

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

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

登录后复制

Async-Try-Catch 示例

此示例还包括以 JSON 形式发送的用户数据：

async function SavePhoto(inp) {
  let user = { name: 'john', age: 34 };
  let formData = new FormData();
  let photo = inp.files[0];

  formData.append("photo", photo);
  formData.append("user", JSON.stringify(user));

  const ctrl = new AbortController(); // for timeout
  setTimeout(() => ctrl.abort(), 5000);

  try {
    let r = await fetch('/upload/image', {
      method: "POST",
      body: formData,
      signal: ctrl.signal,
    });
    console.log('HTTP response code:', r.status);
  } catch (e) {
    console.log('Huston we have problem...:', e);
  }
}

登录后复制

监控上传进度

不幸的是，像 request.onprogress 这样的方法不支持HTML5 文件上传支持 fetch，但您可以通过监听网络事件来监控整体上传进度：

let xhr = new XMLHttpRequest();

xhr.upload.addEventListener('progress', function(e) {
  if (e.lengthComputable) {
    let percentComplete = (e.loaded / e.total) * 100;
    console.log('Upload progress:', percentComplete + '%');
  }
});

xhr.open('POST', '/upload/image');
xhr.send(formData);

登录后复制

以上是如何使用 JavaScript 将文件发送到服务器并监控其上传进度？的详细内容。更多信息请关注PHP中文网其他相关文章！