חינם ES5 / ES6 קובץ JavaScript Plugin - Uppy

אחד הצורות המעורבמות ביותר בעיצוב הוא העלאת קובץ. יש לו סגנון HTML ברירת מחדל, אבל זה לא הדבר הכי יפה בעולם.

אופייני לוקח קובץ העלאות לרמה חדשה לגמרי עם ממשק מותאם אישית - - א תהליך טעינה בסגנון אייאקס דינמי.

זה פועל על קוד ES5 / ES6, כך שתוכל לבנות את יישומי האינטרנט שלך עם הסטנדרטים החדשים ביותר של JavaScript. וגם, זה אפילו תומך בהעלאות קבצים מאתרי אחסון בענן כגון Dropbox או כונן Google, אז זה קובץ רב עבור האינטרנט.

אופייני לגמרי חופשי וקוד פתוח, עם ריפו על גייתוב. עם זאת, הדרך הקלה ביותר להתקין את הפלאגין היא באמצעות npm או חוט, כך שתוכל להפעיל אותו כמו חבילה אמיתית.

ברגע שאתה מקבל את הקבצים שנוספו לאתר האינטרנט שלך, אתה פשוט כלול את הקובץ Uppy.js ואת קוד CSS. לאחר מכן, אתה ממקד כל שדה קלט שאתה רוצה ו Uppy מטפלת בכל השאר.

יש לה ממשק ייחודי נראה כמו מיקום אחד מרובע גדול כדי לגרור ולשחרר קבצים. אתה יכול גם בחר פריטים מהכונן הקשיח או אפילו העלה קבצים מרחוק מכתובות אתר חיצוניות. די מטורף!

אתה יכול למצוא את כל תהליך ההתקנה בדף התיעוד, אבל זה דורש לפחות הבנה כלשהי של ECMAScript 6. ספריה זו מביטה לעבר העתיד של scripting וזה לא הדבר הכי קל לשימוש עם וניל JavaScript טהור.

אבל, אם אתה רציני לגבי פיתוח אינטרנט זה שווה ללמוד ES6 בכל מקרה. אתה יכול למצוא טונות של משאבים מקוונים עבור הוראה עצמית ואתה יכול אפילו להשתמש Uppy כמו הראשון שלך “אמיתי” פרוייקט לצלול ב להתחיל ללמוד.

בדוק את דוגמה למרכז השליטה לראות Uppy בפעולה. עבור דף זה, טען מוסתר מאחורי כפתור ההדק, שבו אתה לוחץ על הלחצן כדי להציג שדה העלאה מודאלית.

משם, תוכל לבחור אם ברצונך להעלות תמונה מהמחשב שלך, מהאינטרנט או אפילו ממצלמת האינטרנט שלך!

הדף דוגמאות מציע חבורה להביט, כולל a דוגמה &, יחד עם דף ההדגמה הבינלאומי.

אבל, כדי ללמוד באמת איך זה עובד, אני ממליץ על גלישת המסמכים וגלישה דרך ריפו GitHub הראשי. תוכל גם לשתף את המחשבות שלך עם היוצרים ב- Twitter @ transloadit.