File và FileReader trong JavaScript

File và FileReader là hai API cốt lõi để xử lý file phía client. File đại diện cho file do người dùng chọn (qua <input type="file">), cung cấp name, size, type. FileReader cho phép đọc nội dung file theo nhiều định dạng (text, data URL, array buffer...).

Ví dụ

Chọn file text và hiển thị thông tin cùng nội dung:

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>File và FileReader</title>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .result, .sample { font-size: 18px; font-weight: 500; color: rebeccapurple; }
    .result { color: red; }
  </style>
</head>
<body>
  <h1>File và FileReader trong JavaScript</h1>
  <input type="file" accept="text/*" onchange="displayFile(this)" />
  <div class="result"></div>
  <br />
  <div class="sample"></div>
  <h3>Chọn file text để xem chi tiết và nội dung</h3>
  <script>
    const resEle = document.querySelector(".result");
    const sampleEle = document.querySelector(".sample");
    function displayFile(input) {
      const file = input.files[0];
      if (!file) return;
      resEle.innerHTML = `Tên file: ${file.name}<br>`;
      resEle.innerHTML += `Kích thước: ${file.size} bytes<br>`;
      resEle.innerHTML += `Loại: ${file.type}<br>`;
      const reader = new FileReader();
      reader.readAsText(file);
      reader.onload = () => sampleEle.innerHTML = reader.result;
      reader.onerror = () => sampleEle.innerHTML = `Lỗi: ${reader.error}`;
    }
  </script>
</body>
</html>

Kết quả

Giao diện có ô chọn file. Sau khi chọn file text, thông tin (tên, kích thước, loại) và nội dung file sẽ hiển thị.

Ứng dụng: Xem trước ảnh, đọc CSV, xử lý upload file trước khi gửi server.