Home เขียนโปรแกรม แนะนำ javascript สำหรับอัพโหลดรูปภาพทีละหลายๆ ไฟล์

แนะนำ javascript สำหรับอัพโหลดรูปภาพทีละหลายๆ ไฟล์

by gigkokman

เว็บไซต์ปัจจุบันนอกจากจะมีหน้าเว็บที่สวยงามแล้ว เครื่องมือลูกเล่นต่างๆ ก็ถือเป็นอีกปัจจัยหนึ่งที่มีผลกับผู้ใช้งาน และการอัพโหลดไฟล์ รูปภาพ ก็มีการพัฒนาขึ้นมาเรื่อยๆ จากที่เป็นฟอร์มธรรมดาที่มีหน้าตาเรียบๆ และอัพโหลดได้ทีละไฟล์ก็มาถึงยุคที่นำเอา javascript เข้ามาช่วย เพื่อให้สามารถอัพโหลดไฟล์หรือรูปภาพได้ทีละหลายๆ ไฟล์และสามารถปรับแต่งการแสดงผลให้ดูสวยและหน้าสนใจมากขึ้น

วันนี้ก็เลยจะมาแนะนำ javascript ที่ใช้ในการอัพโหลดไฟล์กันครับ

jQuery File Upload
jQuery File Uploadสามารถอัพโหลดได้ทีละหลายๆ ไฟล์, ลากวาง (drag&drop), แสดงสถานะการอัพโหลดเป็นแบบ progress bar มีรูปตัวอย่าง (preview) อัพโหลดข้ามโดเมน (cross-domain) ผู้ใช้งานสามารถปรับขนาดได้ (client-side image resizing)

Pixelcone Fileuploader
Pixelcone Fileuploaderใช้ html5 api รองรับการอัพโหลดแบบ ajax upload และสามารถลากวาง (drag&drop) และอาศัยการสร้างฟอร์มขึ้นมาเพื่อรองรับการอัพโหลดทีละหลายไฟล์

Ajax Upload
Ajax Uploadใช้ XHR เพื่อรองรับการอัพโหลดทีละหลายๆ ไฟล์ มี progress bar แสดงสถานะในการอัพโหลด (FF 3.6+,Safari 4+, Chrome)  รองรับ drag & drop

Plupload
Pluploadรองรับ drag & drop ปรับขนาด จำกัดขนาดไฟล์ที่จะอัพโหลดได้ มี progress bar แสดงสถานะการอัพโหลด

Uploadify
Uploadifyเป็น jquery plugin มีให้เลือกใช้ 2 แบบ คือ ที่เป็น HTML5 และ Flash ขึ้นอยู่กับโครงสร้างของเว็บไซต์เราครับ รองรับการอัพโหลดหลายไฟล์ drag & drop progress bar แสดงสถานะการอัพโหลด และสามารถตั้งค่าการอัพโหลดได้อีกหลายอย่างครับ

You may also like