Xem trước ảnh (Preview Image) trước khi upload với JavaScript

Sử dụng FileReader API để đọc file ảnh và hiển thị preview trước khi upload lên server. Không cần jQuery - dùng Vanilla JS hiện đại.

Ví dụ minh họa (Vanilla JS - Khuyên dùng)

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Preview Vanilla JS</title>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; padding: 20px; }
    #preview { max-width: 300px; max-height: 300px; border: 1px solid #ddd; border-radius: 4px; display: none; }
    input[type="file"] { margin: 10px 0; }
  </style>
</head>
<body>
  <h1>Xem trước ảnh trước khi upload</h1>
  <input type="file" id="imageInput" accept="image/*" />
  <br>
  <img id="preview" src="#" alt="Preview" />
  
  <script>
    const imageInput = document.getElementById('imageInput');
    const preview = document.getElementById('preview');
    
    imageInput.addEventListener('change', (event) => {
      const file = event.target.files[0];
      if (!file) return;
      
      // Kiểm tra loại file
      if (!file.type.startsWith('image/')) {
        alert('Vui lòng chọn file ảnh!');
        return;
      }
      
      const reader = new FileReader();
      
      reader.onload = (e) => {
        preview.src = e.target.result; // Data URL (base64)
        preview.style.display = 'block';
      };
      
      reader.onerror = () => {
        console.error('Lỗi đọc file');
        alert('Không thể đọc file ảnh');
      };
      
      // Đọc file as Data URL (base64)
      reader.readAsDataURL(file);
    });
  </script>
</body>
</html>

Kết quả

Chọn file ảnh → Hiển thị ngay ảnh preview bên dưới input.

FileReader Methods:

Event handlers:

reader.onload = (e) => { /* e.target.result */ };     // Thành công
reader.onerror = (e) => { /* e.target.error */ };     // Lỗi
reader.onprogress = (e) => { /* e.loaded / e.total */ }; // Tiến độ (file lớn)
reader.onloadend = (e) => { /* Hoàn tất (thành công hoặc lỗi) */ };

Lưu ý bảo mật & hiệu năng:

• Data URL base64 lớn hơn file gốc ~33%
• File lớn (>10MB) có thể gây lag - cân nhắc resize client-side trước
• Luôn validate file.type và file.size trước khi đọc
• Đối với upload thực tế: dùng FormData + fetch/XMLHttpRequest

Bonus: Multiple files preview

input.multiple = true;
input.addEventListener('change', (e) => {
  [...e.target.files].forEach(file => {
    if (!file.type.startsWith('image/')) return;
    const reader = new FileReader();
    reader.onload = (ev) => {
      const img = document.createElement('img');
      img.src = ev.target.result;
      img.style.maxWidth = '150px';
      document.body.appendChild(img);
    };
    reader.readAsDataURL(file);
  });
});