เว็บไซต์ปัจจุบันนอกจากจะมีหน้าเว็บที่สวยงามแล้ว เครื่องมือลูกเล่นต่างๆ ก็ถือเป็นอีกปัจจัยหนึ่งที่มีผลกับผู้ใช้งาน และการอัพโหลดไฟล์ รูปภาพ ก็มีการพัฒนาขึ้นมาเรื่อยๆ จากที่เป็นฟอร์มธรรมดาที่มีหน้าตาเรียบๆ และอัพโหลดได้ทีละไฟล์ก็มาถึงยุคที่นำเอา javascript เข้ามาช่วย เพื่อให้สามารถอัพโหลดไฟล์หรือรูปภาพได้ทีละหลายๆ ไฟล์และสามารถปรับแต่งการแสดงผลให้ดูสวยและหน้าสนใจมากขึ้น
วันนี้ก็เลยจะมาแนะนำ javascript ที่ใช้ในการอัพโหลดไฟล์กันครับ
jQuery File Upload
สามารถอัพโหลดได้ทีละหลายๆ ไฟล์, ลากวาง (drag&drop), แสดงสถานะการอัพโหลดเป็นแบบ progress bar มีรูปตัวอย่าง (preview) อัพโหลดข้ามโดเมน (cross-domain) ผู้ใช้งานสามารถปรับขนาดได้ (client-side image resizing)
Pixelcone Fileuploader
ใช้ html5 api รองรับการอัพโหลดแบบ ajax upload และสามารถลากวาง (drag&drop) และอาศัยการสร้างฟอร์มขึ้นมาเพื่อรองรับการอัพโหลดทีละหลายไฟล์
Ajax Upload
ใช้ XHR เพื่อรองรับการอัพโหลดทีละหลายๆ ไฟล์ มี progress bar แสดงสถานะในการอัพโหลด (FF 3.6+,Safari 4+, Chrome) รองรับ drag & drop
Plupload
รองรับ drag & drop ปรับขนาด จำกัดขนาดไฟล์ที่จะอัพโหลดได้ มี progress bar แสดงสถานะการอัพโหลด
Uploadify
เป็น jquery plugin มีให้เลือกใช้ 2 แบบ คือ ที่เป็น HTML5 และ Flash ขึ้นอยู่กับโครงสร้างของเว็บไซต์เราครับ รองรับการอัพโหลดหลายไฟล์ drag & drop progress bar แสดงสถานะการอัพโหลด และสามารถตั้งค่าการอัพโหลดได้อีกหลายอย่างครับ