คุณสมบัติที่น่าสนใจอย่างหนึ่งของ HTML 5 คือเราสามารถกำหนดให้อินพุทยอมรับชนิดไฟล์ตามที่เราต้องการได้ ช่องใส่ภาพประจำตัว ก็น่าจะใส่ได้แค่นามสกุล jpeg อย่างน้อยก็ png หรือ gif แต่ก็มียูเซอร์ copy รูปใส่ word upload เข้ามา สมกับ used เซ่อๆ จริงๆ
เราสามารถกำหนดได้โดยใช้ accept Attribute ตามตัวอย่าง
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <!doctype html><html><head><meta charset="utf-8"><title>HTML5 Form Input Accept</title><style>label{ display: block;}</style></head><body><form action="" enctype="multipart/form-data"> <label>เฉพาะไฟล์เสียง <input type="file" name="files[]" accept="audio/*"> </label> <label>เฉพาะรูปภาพ <input type="file" name="files[]" accept="image/*"> </label> <label>เฉพาะวีดีโอ <input type="file" name="files[]" accept="video/*"> </label> <label>pdf <input type="file" name="files[]" accept="application/pdf"> </label> <label>.gif หรือ .png <input type="file" name="files[]" accept="image/gif, image/png"> </label> <label>.jpg <input type="file" name="files[]" accept="image/pjpeg, image/jpeg"> </label> <input type="submit"></form></body></html> |
จะสังเกตว่าเวลาเรา browse file มันจะแสดงเฉพาะนามสกุลที่เรากำหนด แต่ยังเปลี่ยนตัวเลือกไปเป็น All Files (*.*) ได้อยู่ดี มันแค่ช่วยให้เลือกไฟล์ได้ง่ายขึ้น ยังรับประกันไม่ได้อยู่ดีว่าจะได้นามสกุลไฟล์ที่ถูกต้อง หรือไฟล์ที่ส่งมานามสกุลถูกตาม Extension แต่ก็ไม่ได้รับรองว่าไฟล์มันเป็นจริงตามนามสกุลที่ส่งมา จุดที่อันตรายก็เลยต้องมาตรวจชนิดไฟล์ในผั่ง server อยู่เหมือนเดิม
ค่าที่ใส่ใน accept คือ MIME Types ดูเพิ่มเติมได้ที่ The Complete List of MIME Types