HTML5: עבודה עם קבצים בצד הלקוח באמצעות File API

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

מקור: לוגו של ה-HTML 5, מאת ארגון ה-W3C

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

למה בכלל צריך את זה?

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

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

הכירות עם File API

File API מציע מספר interfaces חדשים כדי לעבוד עם הקבצים המקומיים.

  1. File – מייצג קובץ בודד. מספק מידע לקריאה בלבד אודות הקובץ כגון שם, גודל, סוג הקובץ וכן גישה ל- file handle.
  2. FileList – מעיין רצף/מערך של אובייקטים מסוג File.
  3. Blob – מאפשר חיתוך קובץ למערך של בתים.
  4. FileReader – מאפשר גישה לתוכן הקובץ.

דוגמא – בחירת קבצים והצגת פרטיהם

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

מקור: תמונת מסך

נתחיל מדף HTML המאפשר למשתמש לבחור מספר קבצים.

בדף ה- HTML הנ”ל 2 אלמנטים. תגית ה- input הראשונה מאפשרת למשתמש לבחור מספר קבצים להעלאה (שימו לב לשימוש במאפיין multiple). ה- div השני ריק, ואליו נוסיף פרטים בהמשך.

בדיקת תמיכת הדפדפן ב- File API

כמו בכל ספסיפיקצייה מתקדמת, חובה עלינו לבדוק שהדפדפן המריץ את הדף אכן תומך בה, ולתת טיפול בהמשך. כדי לבדוק האם הדפדפן תומך ב- File API נשתמש בקוד הבא:

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

אם ישנה תמיכה, נרצה לרשום פונקציה שתטפל באירוע בחירת הקבצים ע”י המשתמש.

הקוד הנ”ל רושם את הפונקציה handleFileSelection (שעדיין לא כתבנו אותה) לטיפול באירוע בחירת הקבצים. נממש את הפונקציה באופן הבא:

כאשר נבחרים קבצים, אנחנו פונים לאובייקט ev.target (שעליו התרחש האירוע click – אובייקט ה- input control), ומגיעים לשדה files, שהוא אובייקט מסוג FileList. אנחנו רצים בלולאה על אוסף הקבצים ב- FileList כאשר כל אחד מהם הוא אובייקט מסוג File שחושף מספר פרטים על הקובץ.

את כל הפרטים האלה אנחנו משרשרים למערך output ובסוף התהליך יוצרים ממנו רשימת שמוצרת ב- div הריק מתחת לתיבת בחירת הקבצים.

התוצאה תיראה כך:

מקור: תמונת מסך

נסו את File API עם אינטרנט אקספלורר 10

אינטרנט אקספלורר 10 תומך ב- File API החל מגירסת המפתחים השניה, אותה ניתן להוריד מאתר www.IETestDrive.com.

אם אתם רוצים לשחק ב- File API כבר באינטרנט אקספלורר 9, תוכלו להוסיף את התמיכה בקלות ע”י התקנת תוספת מיוחדת מתוך HTML5 Labs.

כרום תומך ב- File API החל מגירסא 6, ופיירפוקס מגירסא 3.6.

תהנו!

הפוסט פורסם לראשונה בבלוג של גיא בורשטיין.

גיא בורשטיין

מומחה טכנולוגיות פיתוח במיקרוסופט ישראל, אחראי על הקשר עם קהילת הפתחים בארץ ובימים אלו מוביל את פעילות פיתוח האפליקציות ל- Windows 8

הגב

5 תגובות על "HTML5: עבודה עם קבצים בצד הלקוח באמצעות File API"

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 

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

סידור לפי:   חדש | ישן | הכי מדורגים
יוסי ביטון
Guest

מאמר נוח לקריאה ומעשיר.
תודה

ובלי קשר, משגע אותי שדווקא MS עם כל המשאבים שלה תמיד מביאה את הדבר הכי עדכני וחדשני, בגרסה הבאה…
למה אין הטמעה אוטומטית של הרחבות מנוע בתוך ie9 מלכתחילה, אם אפשר להוסיף את התמיכה מה-labs כבר היום..?
אתה מן הסתם לא תשנה את זה.. אבל יש עליך שלט של MS ואני עצבני :)

גיא בורשטיין
Guest
@יוסי – תודה על הפידבק למאמר. משמח אותי לקרוא שהוא נוח לקריאה ומעביר את המסר. לגבי למה לא התמיכה לא מופיעה באקספלורר 9 – זה נובע משני דברים: 1. בזמן שפיתחו את אקספלורר 9, הספסיפיקציה של File API הייתה עדיין בשלב לא יציב מספיק וכיוון שמיקרוסופט לא מעדכנת את הדפדפן באופן אוטומטי, זה נכנס רק בגירסא הבאה. 2. בעדכון הקרוב של Windows Phone (שם קוד “מנגו”), יעודכן הדפדפן להיות אקספלורר 9 (במקום גירסא 7 שקיית היום). לכן, העדיפות הייתה להכניס אלמנטים של HTML5 ו- CSS3 שרלוונטים יותר לדפדפן סלולרי. לכן geolocation נכנס ל- 9, ו- File API שלא רלוונטי לדפדפן… Read more »
עידן
Guest

אחלה כתבה, במיוחד בזמן שאני צריך את זה.

חבל שלא נתת לינק להורדה של הקובץ לדוגמא. זה ממש חסר.. במיוחד שכל הקוד זה תמונות

עברי
Guest

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

תומר כהן
Guest

בפיירפוקס נוח מאד לנתח את התעבורה באמצעות ה־Web Console, וגם באמצעות הלשונית Net של Firebug.

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

wpDiscuz

תגיות לכתבה: