Xem trước ảnh trước khi upload trong JavaScript

Browser không cho truy cập đường dẫn file hệ thống. Cần preview ảnh được chọn qua <input type="file"> trước khi upload.

Phương pháp 1: Dùng URL.createObjectURL()

Tạo URL tạm từ file, gán vào src của <img>.

<img id="preview"/>
<input type="file" accept="image/*" onchange="previewImage(event)">
<script>
  const previewImage = e => {
    const preview = document.getElementById('preview');
    preview.src = URL.createObjectURL(e.target.files[0]);
    preview.onload = () => URL.revokeObjectURL(preview.src);
  };
</script>

Phương pháp 2: Dùng FileReader

Đọc file thành base64 data URL.

<img id="preview"/>
<input type="file" accept="image/*" onchange="previewImage(event)">
<script>
  const previewImage = e => {
    const reader = new FileReader();
    reader.readAsDataURL(e.target.files[0]);
    reader.onload = () => {
      const preview = document.getElementById('preview');
      preview.src = reader.result;
    };
  };
</script>

Kết quả

Ảnh preview hiển thị ngay sau khi chọn file.