PHP เช็คขนาดไฟล์ก่อนอัปโหลด ด้วย jQuery

สอนเขียน PHP เช็คขนาดไฟล์ก่อนอัปโหลด ด้วย jQuery บทความนี้สอนการใช้ jQuery Framework สำหรับเช็คขนาดไฟล์เมื่อผู้ใช้งานเลือกไฟล์ กรณีถ้าขนาดไฟล์ใหญ่เกินกว่าที่ระบบรองรับให้แสดงข้อความแจ้งเตือน พร้อมปิดการใช้งานของปุ่ม submit ของฟอร์ม สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง PHP เช็คขนาดไฟล์ก่อนอัปโหลด ด้วย jQuery

<form>
    <input type="file" id="file" />
    <input type="submit" id="submit" value="ตกลง">
</form>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $('#file').bind('change', function() {
        const maxSize = 1000000; //byte
        const mb = maxSize/maxSize;
        let size = this.files[0].size;
        if( size > maxSize ) {
            alert("ระบบไม่รองรับไฟล์ภาพขนาดใหญ่เกินกว่า "+mb+" mb");
            $("#submit").prop( "disabled", true );
        } else {
            $("#submit").prop( "disabled", false );
        }
    });    
</script>

PHP เช็คขนาดไฟล์ก่อนอัปโหลด แนะนำให้ใช้ jQuery Framework จากตัวอย่างมีรายละเอียดดังนี้

1. สร้างฟอร์ม พร้อมกับ input file id = file และปุ่ม submit id = submit

2. เมื่อผู้ใช้งานเลือกไฟล์ โปรแกรมจะเข้าไปทำงานในฟังก์ชัน $('#file').bind('change')

3. กำหนดตัวแปร maxSize = 1000000 มีหน่วยเป็น byte = 1mb กรณีต้องการให้รองรับไฟล์ใหญ่กว่า 1mb ให้เปลี่ยนตัวเลขตรงนี้

4. ใช้คำสั่ง this.files[0].size เพื่อดึงขนาดของรูปภาพออกมา เก็บไว้ที่ตัวแปร size

5. ใช้คำสั่ง if เปรียบเทียบหาก size > maxSize ให้แจ้งข้อความด้วย alert และปิดการใช้งานปุ่ม submit ด้วย prop disabled = true