HTML JavaScript Blob 使用 FormData 进行上传

在本文中，我们将介绍如何使用 HTML、JavaScript 和 Blob 对象以及 FormData 进行文件上传。

阅读更多：HTML 教程

Blob 对象简介

Blob（Binary Large Object）是一种二进制数据对象，它可以存储大量的数据，并以原始格式保存。在 JavaScript 中，Blob 对象常用于处理文件内容。

你可以通过以下方式创建一个 Blob 对象：

var blob = new Blob(array, options);

其中，array是一个包含了要存储的数据的数组，而options是一个可选的对象，用于设置 Blob 对象的MIME类型。

HTML 文件上传表单

HTML 通过 <input type="file"> 元素提供了文件上传的功能。当用户选择一个或多个文件后，就可以将这些文件发送到服务器进行保存或处理。

下面是一个简单的 HTML 文件上传表单示例：

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

在这个例子中，用户选择的文件将通过 POST 请求以多部分表单数据格式发送到服务器的 “/upload” 路径。

JavaScript Blob 上传

要在 JavaScript 中使用 Blob 对象进行上传，我们需要使用 FormData 对象。FormData 对象用于创建表单数据，并且可以通过 AJAX 进行发送。

下面是一个将 Blob 对象使用 FormData 进行上传的示例代码：

var fileInput = document.querySelector('input[type="file"]');
var file = fileInput.files[0];
var formData = new FormData();

formData.append('file', file);

var request = new XMLHttpRequest();
request.open('POST', '/upload');
request.send(formData);

在这个例子中，我们首先获取了用户选择的文件，并将其存储在名为 file 的变量中。然后，我们创建了一个 FormData 对象，并使用 append 方法将文件添加到表单数据中。

最后，我们创建了一个 XMLHttpRequest 对象，并使用 open 方法指定请求的方法和路径，然后使用 send 方法发送表单数据。

使用进度条显示上传进度

如果希望在文件上传过程中显示上传进度，我们可以使用 XMLHttpRequest 的 upload 事件来监听上传的进度。

下面是一个通过显示进度条的示例代码：

var progressBar = document.querySelector('.progress-bar');

var request = new XMLHttpRequest();
request.upload.addEventListener('progress', function(event) {
  var progress = Math.round((event.loaded / event.total) * 100);
  progressBar.style.width = progress + '%';
});

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