Programming
จำกัดขนาดของไฟล์ที่อัพโหลดใน HTML
เวลาที่เราทำเว็บสักเว็บนึง แล้วหน้าเว็บของเรา มีส่วนที่ต้องรับข้อมูลเป็นไฟล์ที่ User อัพโหลดเข้ามา โดยเราสามารถกำหนดขนาดได้ว่า ยอมให้ User อัพโหลดเข้ามาได้สูงสุดขนาดเท่าไหร่ โดยในบทความนี้เราจะมาดูวิธีการทำกัน
เวลาที่เราทำเว็บสักเว็บนึง แล้วหน้าเว็บของเรา มีส่วนที่ต้องรับข้อมูลเป็นไฟล์ที่ 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 ออก
source
คลิกเพื่อแสดงความคิดเห็น