การตรวจสอบขนาดไฟล์ขณะอัปโหลดโดยใช้ JavaScript / jQuery

การทำความเข้าใจรหัส:

ในเนื้อความของหน้าเว็บ เราเพียงแค่ใช้ a

, ,
และ แท็ก ดิ ใช้แท็กเพื่อให้ผู้ใช้สามารถเลือกไฟล์แล้วอัปโหลดโดยใช้ปุ่มที่แสดงโดยใช้ แท็ก

---

---

ดิ

แท็กเรียก การตรวจสอบขนาด() ฟังก์ชั่นเมื่อคลิกเหตุการณ์ซึ่งจะกำหนดขนาดของไฟล์และพิมพ์การแจ้งเตือนที่เหมาะสมขึ้นอยู่กับขนาดของไฟล์

กำหนด JavaScript sizeValidation() Function

ตอนนี้ มาเขียนโค้ด JavaScript ซึ่งกำหนด การตรวจสอบขนาด() การทำงาน.

< สคริปต์ >

การทำงาน ขนาดการตรวจสอบ ( ) {
var input = document.getElementById ( 'ไฟล์' ) ;
เคยเป็น ไฟล์ = input.files;
ถ้า ( file.length== 0 ) {
เตือน ( 'ไม่มีไฟล์ที่เลือก' ) ;
กลับ เท็จ ;
}


var fileSize = Math.round ( ( ไฟล์ [ 0 ] .ขนาด / 1024 ) ) ;

ถ้า ( ขนาดไฟล์ < = 5 * 1024 ) {
เตือน ( 'อัปโหลด' ) ;
} อื่น {
เตือน (
'เกิดข้อผิดพลาด! ไฟล์ใหญ่เกินไป' ) ;
}
}

สคริปต์ >

การทำความเข้าใจรหัส:

ภายในร่างกายของ การตรวจสอบขนาด() ฟังก์ชั่นแรกเราได้รับแท็ก จากนั้นใช้ ไฟล์ var = inputElement.files; เพื่อให้เราสามารถเข้าถึงไฟล์ที่กำลังอัพโหลดได้ จากนั้นเราจะตรวจสอบว่ามีการอัปโหลดไฟล์หรือไม่ ถ้าไม่ เราจะแจ้งข้อความแสดงข้อผิดพลาดและออกจากฟังก์ชันโดยคืนค่าเป็นเท็จ

จากนั้นเราใช้คณิตศาสตร์เพื่อกำหนดขนาดของไฟล์ หากไฟล์มีขนาดที่เหมาะสม เช่น 5MB (ในกรณีนี้) ไฟล์นั้นจะถูกอัปโหลด

มิฉะนั้น ป๊อปอัปที่มีข้อความแสดงข้อผิดพลาดจะปรากฏขึ้น

บทสรุป

แม้ว่าการตรวจสอบฝั่งไคลเอ็นต์จะมีประสิทธิภาพมากกว่ามาก แต่ก็ยังไม่สามารถทดแทนการตรวจสอบฝั่งเซิร์ฟเวอร์ได้ และสามารถหลีกเลี่ยงได้ในกรณีส่วนใหญ่ แนวทางปฏิบัติที่ดีที่สุดคือการใช้ทั้งการตรวจสอบเซิร์ฟเวอร์และฝั่งไคลเอ็นต์ เพื่อให้คุณมั่นใจได้ถึงประสิทธิภาพและความถูกต้องของแอปพลิเคชันของคุณ