Đối tượng Blob trong JavaScript

Đối tượng Blob (Binary Large Object) trong JavaScript đại diện cho dữ liệu thô bất biến (immutable raw data). Giống như File, Blob có các thuộc tính size (kích thước) và type (loại MIME). Thực tế, File kế thừa từ Blob, do đó Blob có thể dùng ở mọi nơi mà File được sử dụng.

Ví dụ

Dưới đây là mã minh họa cách tạo và sử dụng Blob:

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Blob trong JavaScript</title>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .result { font-size: 18px; font-weight: 500; color: rebeccapurple; }
  </style>
</head>
<body>
  <h1>Đối tượng Blob trong JavaScript</h1>
  <div class="result"></div>
  <button class="Btn">TẠO BLOB</button>
  <h3>Nhấn nút trên để tạo và hiển thị thông tin Blob</h3>
  <script>
    const resEle = document.querySelector(".result");
    document.querySelector(".Btn").addEventListener("click", () => {
      // Tạo Blob từ mảng chuỗi, chỉ định loại MIME
      const blob = new Blob(["Đây là một Blob mẫu"], { type: "text/plain" });
      resEle.innerHTML = "blob.type = " + blob.type + "<br>";
      resEle.innerHTML += "blob.size = " + blob.size + " bytes";
    });
  </script>
</body>
</html>

Kết quả

Khi chạy mã, giao diện ban đầu hiển thị nút bấm. Sau khi nhấn TẠO BLOB, thông tin type và size của Blob sẽ hiện ra.

Lưu ý: Blob hữu ích khi xử lý dữ liệu nhị phân như hình ảnh, file âm thanh, hoặc tạo file tải xuống phía client.