HTML5: קריאת תוכן קובץ בצד הלקוח ב- JavaScript עם File API
פוסט זה הוא פוסט נוסף בסדרה עבודה עם קבצים בצד הלקוח באמצעות File API. בפוסט הקודם הבנו את המוטיבציה לשימוש ב- File API, הכרנו את האובייקטים המרכזיים ב- API וראינו דוגמא פשוטה לקבלת פרטי קבצים שנבחרו ע”י המשתמש. בפוסט זה, נראה כיצד לקרוא את תוכן הקובץ בצד הלקוח ב- JavaScript ומה אפשר לעשות עם התוכן הזה.
קריאת תוכן הקובץ עם האובייקט FileReader
בפוסט הקודם, ראינו דוגמא שבה המשתמש בוחר קבצים מהמחשב המקומי, ובפונקציית הטיפול באירוע בחירת הקבצים קיבלנו גישה לאובייקטים מסוג File, שאפשר לנו ללמוד מספר פרטים בסיסיים על הקובץ הנבחר.
ברגע שיש לנו אובייקט מסוג File, אפשר ליצור מופע של אובייקט מסוג FileReader לצורך קריאת תוכן הקובץ באחת מארבע דרכים:
(FileReader.readAsBinaryString(File – קריאת תוכן הקובץ וקבלת ייצוג בינארי של הקובץ כמחרוזת בשדה result. כל תו במחרוזת מיוצג ע”י מספר בין 0 ל- 255. (FileReader.readAsText(File, opt_encoding – קריאת תוכן הקובץ כטקסט, לפי הקידוד שמועבר כפרמטר. השדה result יכיל מחרוזת עם התוכן הטקסטואלי של הקובץ. קידוד ברירת המחדל הוא UTF8, והשדה הזה הוא אופציונאלי. (FileReader.readAsDataURL(File – השדה result יכיל ייצוג של הקובץ כ- data URL (מחרוזת בסגנון: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA . (FileReader.readAsArrayBuffer(File – השדה result יכיל את תוכן הקובץ כאובייקט ArrayBuffer.
אחראי שקראנו את תוכל הקובץ בכל אחת מהדרכים האלה, ניתן להשתמש באירועים onloadstart, onprogress, onload,onabort, onerror, ו- onloadend כדי לעקוב אחרי ההתקדמות ולבצע פעולות בהתאם.
דוגמא: קריאת תוכן קבצי תמונה והצגתם באתר
בדוגמא הבאה המשתמש בוחר מספר קבצי תמונה מהמחשב המקומי, וע”י שימוש ב- FileReader, קוראים את תוכן קובץ התמונה ומציגים אותו באתר. כל זה נעשה בצד הלקוח בלבד והקבצים אינם מועלים לשרת.
<!DOCTYPE html>
<html>
<head>
<title>FileReader Sample</title>
</head>
<body>
<input type="file" id="files" name="files[]" multiple="multiple" />
<div id="list">
</div>
<script>
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++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = function (e) {
// Render the image
var span = document.createElement('span');
span.innerHTML = '<img src="' + e.target.result + '"/>';
document.getElementById('list').insertBefore(span, null);
};
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
// 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.');
}
</script>
</body>
</html>
דף ה- HTML מכיל פקד לבחירת מספר קבצים וכן div ריק בשם list.
במידה והדפדפן תומך ב- File API, אנחנו רושמים את הפונקציה handleFileSelection לטיפול באירוע בחירת הקבצים. בפונקציה הזו אנחנו מקבלים רשימת אובייקטים מסוג File, מוודאים שהם מסוג קובץ תמונה וקוראים את תוכן הקובץ באופן הבא:
- עבור כל קובץ, אנחנו יוצרים מופע של
FileReader וקוראים לפונקציה readAsDataURL עם הקובץ לקריאה כפרמטר.
- הפונקציה
readAsDataURL קוראת את תוכן הקובץ באפון אסינכרוני, ובסיום הקריאה מפעילה את האירוע onload, ולכן אנחנו נרשמים לטיפול באירוע הזה.
- כאשר טעינת הקובץ הסתיימה, בתור טיפול באירוע
onload, אנחנו יוצרים span חדש עם תמונה בתוכו שמציגה את תוכן הקובץ, ומוסיפים אותו ל- div הריק בדף.
בהרצת הדוגמא – נבחר מספר קבצי תמונה במחשב האישי ואלה יוצגו בדף ה- HTML שלנו.
תמיכה בדפדפנים
- אינטרנט אקספלורר 10 תומך ב- File API החל מגירסת המפתחים השניה, אותה ניתן להוריד מאתרwww.IETestDrive.com.
- אם אתם רוצים לשחק ב- File API כבר באינטרנט אקספלורר 9, תוכלו להוסיף את התמיכה בקלות ע”יהתקנת תוספת מיוחדת מתוך HTML5 Labs.
- כרום תומך ב- File API החל מגירסא 6, ופיירפוקס מגירסא 3.6.
תהנו!