Kiểm tra dung lượng file phía client (Client-side) với HTML5 File API

Trước HTML5, kiểm tra dung lượng file cần Flash. Hiện nay, File API cho phép truy cập thông tin file (kích thước, tên, loại) ngay tại trình duyệt trước khi upload.

Cách lấy dung lượng file

<input type="file" id="myfile">

<script>
document.getElementById('myfile').addEventListener('change', function(e) {
  var file = e.target.files[0]; // File đầu tiên được chọn
  if (file) {
    var sizeInBytes = file.size;
    var sizeInKB = (sizeInBytes / 1024).toFixed(2);
    var sizeInMB = (sizeInKB / 1024).toFixed(2);
    
    console.log('File:', file.name);
    console.log('Kích thước:', sizeInBytes, 'bytes |', sizeInKB, 'KB |', sizeInMB, 'MB');
    
    // Ví dụ: Giới hạn 5MB
    if (sizeInBytes > 5 * 1024 * 1024) {
      alert('File quá lớn! Tối đa 5MB.');
      this.value = ''; // Reset input
    }
  }
});
</script>

Đối tượng File - Các thuộc tính hữu ích

Kiểm tra nhiều file cùng lúc (multiple)

<input type="file" id="multiFile" multiple>

<script>
document.getElementById('multiFile').addEventListener('change', function(e) {
  var files = e.target.files;
  var totalSize = 0;
  
  for (var i = 0; i < files.length; i++) {
    totalSize += files[i].size;
    console.log((i+1) + '. ' + files[i].name + ' - ' + (files[i].size/1024).toFixed(2) + ' KB');
  }
  
  console.log('Tổng dung lượng: ' + (totalSize/1024/1024).toFixed(2) + ' MB');
});
</script>

Lưu ý bảo mật

• Kiểm tra client-side chỉ để UX tốt hơn (thông báo sớm).
• Luôn validate lại phía Server - Client có thể giả mạo request.
• File API chỉ đọc metadata, không đọc nội dung file trừ khi dùng FileReader.