ניצוצות ברשת

כך תאפשרו לגרור קבצים לתוך חלון הדפדפן בעזרת HTML5

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

יונית רושו
שתפו כתבה במיילשליחת הכתבה באימייל

כמו שראינו בטורים הקודמים, HTML5 נותנת לנו ארגז כלים מלא וגדוש גם מבלי להזדקק לשפות חיצוניות, והיום נסקור עוד אפשרות כזאת: גרירת קבצים מהמחשב האישי לתוך חלון הדפדפן. עד html5, כדי לגרור אלמנטים (ולא בטכנולוגיית פלאש), היה, בדרך כלל, צריך לכתוב קוד javascript, והאמת שלא היה בזה הרבה שימוש.

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

מדוע? מאחר ול- html5 יש יכולת מדהימה לקרוא את הנתיב לקובץ הרצוי ובעזרת javascript לקרוא את תוכנו לשימושים שונים. זה כמו שיגידו לך מה הכתובת של דירה מסוימת בתל אביב ואז יתנו לך מצלמה לראות מה מתרחש בדירה. תוכל לראות כל מה שקורה שם, מבלי באמת להיות שם. וכן, זה בעצם מחליף את הכפתור Browse שהופך להיות מיושן, כי במקום ללחוץ עליו ואז לבחור קובץ, ניתן יהיה פשוט לגרור את הקובץ לדפדפן והוא כבר יצליח להסתדר.

בואו ניכנס יותר לעומק ונבין במה מדובר.

drag ו- drop מהמחשב לג'ימייל

כמו שאומרים, אין טוב ממראה עיניים. בואו נבין תחילה על מה כל המהומה.
ג'ימייל: האם ידעת שבאפשרותך לגרור קבצים מהמחשב שלך לג'ימייל ואין צורך ללחוץ על הקישור "Attach a file"?

גרירת קבצים מהמחשב לחלון הג'ימייל אוטומטית גורמת לו להציג "אזור נחיתה" עבור הקובץ, שמנחה אותך: Drop files here. זהו תהליך הגרירה: Drag.

בעזיבת האצבע מהעכבר, כשהקובץ הנגרר "נוחת" מעל אזור הנחיתה המצפה לו, מתבצעת אוטומטית פעולת קריאת הקובץ והוספתו כ- attachment למייל. פעולת הפסקת הגרירה נקראת Drop. אותו התהליך מתרחש גם כאשר גוררים יותר מקובץ אחד.

תמיכת דפדפנים

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


הסבר מעט טכני

כאמור, היכולת לגשת לקבצים מקומיים הפכה להיות משימה קלה ב- html5, תודות ל- File API, המאפשר לקרוא אותם ולעשות מניפולציות נוספות.

אנסה לתאר את התהליך באופן מופשט ככל שאוכל: ברגע עזיבת הקובץ, מופעל אירוע drop. File API מאפשר קריאת קובץ-קובץ בתוך אובייקט המכיל את רשימת כל הקבצים (בהנחה שיכולים לגרור קובץ אחד או יותר). כשקובץ נקרא עד סופו, נוצר אובייקט data URL ונקרא אירוע שמציין שכל הקובץ נקרא. מרגע זה ניתן לעשות עם המידע דברים מגניבים, כמו שבג'ימייל ברגע קריאת הקובץ, הוא מוסיף אותו למייל כ- attachment. כמו כן, ניתן להציג אייקון של סוג הקובץ, pdf, word, אקסל וכו'. בדוגמא שהכנתי מבעוד מועד, כשהקובץ נקרא, במידה והוא מסוג תמונה, היא תוצג כ- preview בדפדפן.

קוד בבקשה

כמו בטורים הקודמים בסדרה זו, גם בטור זה אציג לכם דוגמא אחת מני רבות, לאפשרות השימוש ב- File API.

הקוד פשוט. תחילה, יש להגדיר אזור שבו יזרוק המשתמש את הקובץ או הקבצים שהוא גרר.

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


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

הקוד להגדרת האזור. לחצו להגדלה
הקוד להגדרת הפונקציה. לחצו להגדלה

אם יש לך רקע טכני בכתיבת קוד, זה לא מסובך, נכון?
תוכל לראות את הדוגמא בכתובת הבאה:

http://dynamic-web.co.il/html5/drag_and_drop.html

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

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

כך זה יראה בדפדפן

רק זכרו, דפדפנים ישנים אינם תומכים בכך עדיין. בדוק אם לקהל שלך יש אפשרות לראות את File API עובד.

הקטע לקוח מספר Html5 בהוצאת הד ארצי, שנכתב בידי יונית רושו, מנכ"לית בניית אתרים דיינמיק-ווב ומרצה במסלול לעיצוב אינטראקטיבי במכללת שנקר. בוער לכם להציג אתר או אפליקציה ברמה בינלאומית? אני ממתינה לכם בפייסבוק ואהיה כאן בשבוע הבא.

אתם מוזמנים להמשיך ולפנות אליי עם קישורים לאתרים שלכם: yonit.haaretz@gmail.com

לחצו לטורים קודמים בסדרה


הזינו שם שיוצג כמחבר התגובה
בשליחת תגובה זו הנני מצהיר שהינני מסכים/ה עם תנאי השימוש של אתר הארץ