Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

จำกัดจำนวนไฟล์สูงสุดใน Multiple File Upload


ใช้แอตทริบิวต์ multiple บน <input type="file"> เพื่อให้อัปโหลดหลายไฟล์ได้ แอตทริบิวต์นี้ทำงานกับ type file และ email

จำกัดจำนวนไฟล์ด้วย JavaScript

HTML ไม่มีแอตทริบิวต์จำกัดจำนวนไฟล์โดยตรง ต้องใช้ JavaScript ตรวจสอบก่อนส่งฟอร์ม

ตัวอย่าง: จำกัดสูงสุด 3 ไฟล์

<!DOCTYPE html> <html>    <head>       <title>HTML file upload</title>    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head>    <body>       <form>          <input type="file" name="files" multiple><br/>          อัปโหลดหลายไฟล์ (สูงสุด 3 ไฟล์) <br>          <input type="submit" value="Submit">       </form>       <script>          $("form").on("submit", function(e){             var files = $("input[type='file']")[0].files;             if (files.length > 3){                alert("อัปโหลดได้สูงสุด 3 ไฟล์เท่านั้น");                e.preventDefault();             }          });       </script>    </body> </html>

ตรวจสอบ files.length ใน event submit ใช้ e.preventDefault() ยกเลิกการส่งฟอร์มถ้าเกินจำนวนที่กำหนด