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

20 ביולי 2011

no comments

HTML5 File API אקספלורר 10HTML5 מאפשר לגשת בצד הלקוח לקבצים המקומיים באמצעות ספסיפיקציית ה- 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 – מאפשר גישה לתוכן הקובץ.

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

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

HTML5 File API אקספלורר 10

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

<!DOCTYPE html>
<
html
>
<
head>
  <title>File API Sample</title
>
</
head
>
<
body>
  <input type="file" id="files" name="files[]" multiple="multiple" />
  <div id="list">
  </div
>
</
body
>
</
html
>

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

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

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

<script>
if
(window.File && window.FileReader && window.FileList && window.Blob) {
 
// File API is supported.
}
else
{
  alert(
'File API is not supported.'
);
}

</script
>

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

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

// Check for the various File API support.
if
(window.File && window.FileReader && window.FileList && window.Blob) {

 
// File API is supported.
  document.getElementById('files'
)
    .addEventListener(
'change', handleFileSelection, false
);

}
else
{
  alert(
'File API is not supported.');
}

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

function handleFileSelection(evt) {
 
var
output = [];

 
// Go over the list of files
  var
files = evt.target.files;
 
for (var
i = 0, f; f = files[i]; i++) {

   
// Get the properties of the individual file
    output.push('<li><strong>', f.name, '</strong> ('
,
              f.type ||
'n/a', ') - '
,
              f.size,
' bytes, last modified: '
,
              f.lastModifiedDate,
'</li>'
);
  }

 
// Add the output to the empty div
  document.getElementById('list'
).innerHTML =
   
'<ul>' + output.join('') + '</ul>';
}

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

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

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

HTML5 File API אקספלורר 10

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

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

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

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

תהנו!

Add comment
facebook linkedin twitter email