Belajar HTML5 File API HTML5

11. Memuat File melalui ArrayBuffer

Fungsi objek FileReader readAsArrayBuffer() dapat digunakan ArrayBuffer untuk membaca data file. Sebuah buffer data akan mewakili setiap Panjang ArrayBuffer. Anda tidak dapat secara langsung memanipulasi ArrayBuffer data di dalamnya. Anda harus membuat objek DataViewyang dapat menerima semua jenis data ArrayBuffer. Berikut ini contoh kodenya:

function loadAsUrl(theFile) {
     var reader = new FileReader();
 
     reader.onload = function(loadedEvent) {
         var arrayBuffer = loadedEvent.target.result;
         var dataView = new DataView(arrayBuffer, 0, arrayBuffer.byteLength);
 
         var byte = dataView.getUint8(0); //Get the first byte of ArrayBuffer
 
         //...Process the remaining dataView...
     }
 
     reader.readAsArrayBuffer(theFile);
}

12. Traking Proses Pemuatan File

file API HTML5 memungkinkan kita untuk melacak dan mentraking proses kemajuan pemuatan file. Yang berarti kita dapat mengetahui berapa banyak file yang sedang dimuat. Untuk melacak kemajuan pemuatan file, Anda dapat menambahkan FileReader onprogress event listener ke objek.

var reader = new FileReader();
 
reader.onprogress = function(progressEvent) {
 
    if(progressEvent.lengthComputable) {
        var percentLoaded = Math.round( (
                progressEvent.loaded * 100) / progressEvent.total );
    }
    console.log("total: " + progressEvent.total + ", loaded: "
              + progressEvent.loaded + "(" + percentLoaded + "%)");
}                 

Parameter onprogress event yang diteruskan ke progressEvent berisi atribut boolean lengthComputable. Jika nilai properti ini adalah true, Anda dapat menghitung berapa banyak file yang telah dimuat. Operasi spesifiknya seperti kode di atas.

Baca Juga : Belajar HTML5 Dan Memahami HTML5 

13. Dukungan Browser Untuk File API HTML5

Dukungan browser untuk File API HTML5 dapat diperiksa melalui caniuse.com. IE8 dan IE9 tidak mendukungnya dan browser modern lainnya mendukung File API HTML5. Namun, beberapa browser tidak mendukung File konstruktor objek yang sebenarnya tidak berpengaruh pada penggunaan.