ปลั๊กอินอัปโหลดไฟล์ JavaScript สำหรับ ES5 / ES6 ฟรี - Uppy

หนึ่งในรูปแบบที่ยุ่งยากที่สุดในการออกแบบคือ อัปโหลดไฟล์. มันมีสไตล์ HTML เริ่มต้น แต่ไม่ใช่สิ่งที่สวยที่สุดในโลก.

Uppy นำการอัปโหลดไฟล์ไปสู่ระดับใหม่โดยใช้ อินเตอร์เฟสแบบกำหนดเอง และ กระบวนการโหลด Ajax แบบไดนามิก.

มัน ทำงานบนรหัส ES5 / ES6, เพื่อให้คุณสามารถสร้างเว็บแอปด้วยมาตรฐาน JavaScript ล่าสุด และมันยัง รองรับการอัพโหลดไฟล์จากเว็บไซต์ที่จัดเก็บบนคลาวด์ เช่น Dropbox หรือ Google Drive ดังนั้นจึงเป็น สคริปต์อัพโหลดไฟล์หลายแง่มุม สำหรับเว็บ.

Uppy คือ สมบูรณ์ฟรีและโอเพนซอร์ส, ด้วย repo บน GitHub อย่างไรก็ตามวิธีที่ง่ายที่สุดในการติดตั้งปลั๊กอินนี้คือผ่าน npm หรือ Yarn ดังนั้นคุณสามารถทำได้ เรียกใช้เหมือนแพ็คเกจจริง.

เมื่อคุณเพิ่มไฟล์ลงในเว็บไซต์ของคุณคุณก็แค่ รวมไฟล์ Uppy.js และรหัส CSS. จากนั้นคุณกำหนดเป้าหมายช่องป้อนข้อมูลใดก็ได้ที่คุณต้องการและ Uppy จะดูแลส่วนที่เหลือ.

มันมีอินเตอร์เฟสที่ไม่เหมือนใคร ดูเหมือนหนึ่งตำแหน่งสี่เหลี่ยมจัตุรัสขนาดใหญ่ เพื่อลากและวางไฟล์ นอกจากนี้คุณยังสามารถ เลือกรายการจากฮาร์ดไดรฟ์ของคุณ หรือแม้กระทั่ง อัปโหลดไฟล์จากระยะไกลจาก URL ภายนอก. ค่อนข้างบ้า!

คุณสามารถค้นหากระบวนการตั้งค่าทั้งหมดได้ในหน้าเอกสารประกอบ ต้องมีความเข้าใจ ECMAScript 6 เป็นอย่างน้อย. ห้องสมุดนี้มองไปสู่อนาคตของการเขียนสคริปต์และไม่ใช่สิ่งที่ง่ายที่สุดที่จะใช้กับ JavaScript วานิลลาแท้ๆ.

แต่ถ้าคุณจริงจังกับการพัฒนาเว็บไซต์คุณควรเรียนรู้ ES6 ต่อไป คุณสามารถหา ทรัพยากรออนไลน์มากมาย สำหรับการเรียนรู้ด้วยตนเองและคุณสามารถใช้ Uppy เป็นคนแรกได้ “จริง” โครงการที่จะดำน้ำใน & เริ่มเรียนรู้.

ลองดูตัวอย่างแดชบอร์ดถึง เห็นการใช้งานของ Uppy. สำหรับหน้านี้ การอัปโหลดถูกซ่อนอยู่หลังปุ่มทริกเกอร์, ที่คุณคลิกปุ่มเพื่อแสดงฟิลด์การอัปเดตเป็นกิริยาช่วย.

จากตรงนั้นคุณสามารถเลือกได้ว่าต้องการอัพโหลดภาพหรือไม่ จากคอมพิวเตอร์ของคุณจากเว็บหรือจากเว็บแคมของคุณ!

หน้าตัวอย่างนำเสนอกลุ่มการค้นหารวมถึง ตัวอย่างการลากและวาง, พร้อมกับ หน้าสาธิตสากล.

แต่เพื่อเรียนรู้วิธีการทำงานจริง ๆ ฉันขอแนะนำให้อ่านเอกสารและเรียกดูผ่าน repo หลักของ GitHub นอกจากนี้คุณยังสามารถแบ่งปันความคิดของคุณกับผู้สร้างบน Twitter @transloadit.