ปกติแท็ก input ที่มีชนิด (type) เป็นไฟล์ (file) ของ HTML ถ้าเราไม่มีdการกำหนดค่า accept ไว้ ถ้าเรากด Browse ป๊อปอัพจะแสดงโฟลเดอร์ย่อยและไฟล์ทุกชนิดที่มีอยู่ในโฟลเดอร์นั้นๆ ซึ่งจะทำให้เราหรือผู้ใช้งานเว็บของเราหาไฟล์ที่ต้องการได้ยาก ถ้าหากมีไฟล์ในโฟล์เดอร์นั้นเยอะๆ
ดังนั้น ถ้าเราสามารถกำหนดชนิดของไฟล์ที่ต้องการก็จะเป็นการกรองไฟล์ที่ไม่ต้องการออกไป ทำให้ผู้ใช้สามารถเลือกหาไฟล์ที่ต้องการได้ง่ายขึ้น วิธีการก็ง่ายๆ เลยครับ สิ่งที่ต้องทำก็คือ เพิ่ม attribute ที่ชื่อ accept ให้กับแท็ก input ของเราครับ
<input type="file" name="pic" accept="image/*" />
ตัวอย่างข้างบนเป็นการบอกให้ input file รู้ว่าเราต้องการให้แสดงไฟล์ที่เป็นรูปภาพทุกชนิดครับ
ถ้าอยากให้แสดงไฟล์ชนิดอื่นก็ได้นะครับ
- รูปภาพ (image/*)
- ไฟล์เสียง (audio/*)
- ไฟล์วีดีโอ (video/*)
- หรือจะเป็น MIME_TYPE อื่นลองไปดูเต็มๆ ได้ที่นี่ครับ
การใช้ attribute accept นั้นไม่สามารถ validate ได้นะครับ ถ้าเราต้องการจำกัดชนิดของไฟล์ที่สามารถอัพโหลดได้ เราต้องตรวจสอบที่เซิฟเวอร์เท่านั้นนะครับ