HTML5: קריאת תוכן קובץ בצד הלקוח ב- JavaScript עם File API

22 ביולי 2011

one comment

HTML File API FileReaderפוסט זה הוא פוסט נוסף בסדרה עבודה עם קבצים בצד הלקוח באמצעות 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 שלנו.

HTML File API FileReader

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

  • אינטרנט אקספלורר 10 תומך ב- File API החל מגירסת המפתחים השניה, אותה ניתן להוריד מאתרwww.IETestDrive.com.
  • אם אתם רוצים לשחק ב- File API כבר באינטרנט אקספלורר 9, תוכלו להוסיף את התמיכה בקלות ע”יהתקנת תוספת מיוחדת מתוך HTML5 Labs.
  • כרום תומך ב- File API החל מגירסא 6, ופיירפוקס מגירסא 3.6.

תהנו!

Add comment
facebook linkedin twitter email

one comment

  1. A24 ביולי 2011 ב 1:22

    מעניין מאוד.. נכנסת לי ל rss

Comments are closed.