ตรวจสอบขนาดไฟล์ฝั่ง Client ด้วย HTML5 File API

ก่อน HTML5 การตรวจสอบขนาดไฟล์ฝั่ง Client ต้องใช้ Flash แต่ปัจจุบันสามารถใช้ File API ได้โดยตรง ไม่ต้องพึ่งปลั๊กอินภายนอก

หลักการทำงาน

เมื่อผู้ใช้เลือกไฟล์ผ่าน <input type="file"> เบราว์เซอร์จะสร้าง FileList object ซึ่งแต่ละไฟล์เป็น File object ที่มี property size (หน่วยเป็น bytes)

ตัวอย่างโค้ดพื้นฐาน

<!DOCTYPE html>
<html>
<head>
  <title>File Size Check Demo</title>
</head>
<body>
  <h2>ตรวจสอบขนาดไฟล์ก่อนอัปโหลด</h2>
  
  <input type="file" id="fileInput" accept="image/*,.pdf,.doc,.docx">
  <br><br>
  
  <div id="fileInfo"></div>
  <div id="errorMsg" style="color: red; display: none;"></div>
  
  <script>
    const fileInput = document.getElementById('fileInput');
    const fileInfo = document.getElementById('fileInfo');
    const errorMsg = document.getElementById('errorMsg');
    
    // กำหนดขนาดสูงสุด (5 MB)
    const MAX_SIZE = 5 * 1024 * 1024; // 5 MB in bytes
    
    fileInput.addEventListener('change', (event) => {
      const file = event.target.files[0];
      
      if (!file) {
        fileInfo.innerHTML = '';
        errorMsg.style.display = 'none';
        return;
      }
      
      // แสดงข้อมูลไฟล์
      fileInfo.innerHTML = `
        <strong>ชื่อไฟล์:</strong> ${file.name}<br>
        <strong>ประเภท:</strong> ${file.type || 'ไม่ระบุ'}<br>
        <strong>ขนาด:</strong> ${formatFileSize(file.size)} (${file.size} bytes)<br>
        <strong>วันที่แก้ไขล่าสุด:</strong> ${new Date(file.lastModified).toLocaleString('th-TH')}
      `;
      
      // ตรวจสอบขนาด
      if (file.size > MAX_SIZE) {
        errorMsg.textContent = `❌ ไฟล์ใหญ่เกินไป! ขนาดสูงสุด ${formatFileSize(MAX_SIZE)}`;
        errorMsg.style.display = 'block';
        fileInput.value = ''; // เคลียร์ไฟล์ที่เลือก
        fileInfo.innerHTML = '';
      } else {
        errorMsg.style.display = 'none';
      }
    });
    
    function formatFileSize(bytes) {
      if (bytes === 0) return '0 Bytes';
      const k = 1024;
      const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
      const i = Math.floor(Math.log(bytes) / Math.log(k));
      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    }
  </script>
</body>
</html>

การตรวจสอบหลายไฟล์ (multiple files)

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

<script>
document.getElementById('multiFileInput').addEventListener('change', (event) => {
  const files = Array.from(event.target.files);
  const MAX_TOTAL_SIZE = 20 * 1024 * 1024; // 20 MB
  let totalSize = 0;
  
  files.forEach(file => {
    totalSize += file.size;
    console.log(`${file.name}: ${formatFileSize(file.size)}`);
  });
  
  console.log(`รวม: ${formatFileSize(totalSize)}`);
  
  if (totalSize > MAX_TOTAL_SIZE) {
    alert(`ขนาดรวมเกิน ${formatFileSize(MAX_TOTAL_SIZE)}`);
    event.target.value = '';
  }
});
</script>

ข้อควรระวัง

• การตรวจสอบฝั่ง Client ไม่เพียงพอ - ต้องตรวจสอบอีกครั้งฝั่ง Server (Server-side validation) เพราะผู้ใช้สามารถ bypass ได้
• FileReader ไม่จำเป็นสำหรับการตรวจสอบขนาด - ใช้ file.size โดยตรงได้เลย
• รองรับในเบราว์เซอร์สมัยใหม่ทุกตัว (IE10+)
• สำหรับโฟลเดอร์ ใช้ webkitdirectory attribute (non-standard)

แอตทริบิวต์เสริมสำหรับ input file

• accept - กรองประเภทไฟล์ (MIME types, extensions)
• multiple - เลือกหลายไฟล์พร้อมกัน
• capture - เลือกแหล่งที่มา (camera, microphone) บนมือถือ