จำกัดขนาดของไฟล์ที่อัพโหลดใน HTML

เวลาที่เราทำเว็บสักเว็บนึง แล้วหน้าเว็บของเรา มีส่วนที่ต้องรับข้อมูลเป็นไฟล์ที่ User อัพโหลดเข้ามา โดยเราสามารถกำหนดขนาดได้ว่า ยอมให้ User อัพโหลดเข้ามาได้สูงสุดขนาดเท่าไหร่ โดยในบทความนี้เราจะมาดูวิธีการทำกัน

สร้าง ID ให้กับ Input

เริ่มจากการสร้างไฟล์ html ง่ายๆ สร้าง input แล้วกำหนด id ให้กับ input นั้น

<body>
  <input id="file" />
</body>

เรียกใช้ Input ด้วย ID

จากนั้นเรียกใช้ input ด้วย id ผมก็จะใช้วิธีง่ายๆ คือ ใช้ getElementById นี่แหละ

var uploadField = document.getElementById("file");

จากนั้นใส่ Event ให้กับ input นั้นๆ โดยใช้ onchange ซึ่งจะทำงานเมื่อมีการเปลี่ยนแปลงใน input

uploadField.onchange = function () {
  if (this.files[0].size > 2097152) {
    alert("File is too big!");
    this.value = "";
  }
};

2097152 คือขนาดไฟล์ที่เราต้องการ ในที่นี้คือ 2 MB ถ้าเกินจะแสดง alert และลบค่าใน input ออก