Labkom99.com – File API HTML5 memungkinkan halaman menggunakan Javascript untuk memanggil dan memproses file di sistem file lokal. Melalui File API HTML5, kita dapat menggunakan javascript untuk memproses file tertentu seperti membandingkan file, encoding, mengenkripsi dan mengupdate operasi. Karena ini melibatkan pengoperasian file lokal, masalah keamanan File API HTML5 juga merupakan masalah utama yang diperhatikan orang. Pada Artikel ini labkom99 akan memperkenalkan cara menggunakan File API HTML5 dan masalah keamanan File API HTML5.
1. Objek Penting File API HTML5
File API HTML5 mencakup objek penting dan bisa dibilang paling inti seperti berikut ini:
FileList
FileList Objek tersebut mewakili sekelompok file dalam sistem file lokal. Misalnya, semua file di direktori atau folder tertentu.
File
File Objek tersebut mewakili sebuah file dalam sistem file lokal.
Blob
Blob Objek tersebut mewakili Binnery Large Object (BLOB), yang merupakan data dari satu file dalam sistem file lokal.
FileReader
FileReader objek memungkinkan aplikasi web asynchronous membaca isi file (atau buffer data mentah) yang tersimpan di komputer pengguna, menggunakan Fileatau Blobobjek untuk menentukan file atau data untuk membaca. Berikut ini akan menjelaskan cara menggunakan objek File API ini.
Baca Juga : Belajar HTML5 Web Workers HTML5
2. Pilih File API HTML5
Sebelum File API HTML5 dapat memproses file di sistem file lokal, pengguna perlu melakukan operasi untuk memilih file. Untuk alasan keamanan, <input type=”file”> file biasanya dipilih melalui elemen HTML , seperti kode contoh berikut:
<input type="file" > Memiliki input elemen saja tidak cukup, kita juga perlu menambahkan onchange event listener, berikut contoh kodenya:
<input type="file" onchange="readFiles(event)">Kolom file input input[type=’file’] berisi tombol “Pencarian”. Saat pengguna mengklik tombol ini, kotak dialog file akan muncul. Dalam kotak dialog file tersebut, pengguna dapat memilih file lokal. Dan file yang dipilih akan diteruskan sebagai parameter onchange memonitor event object.
Baca Juga : Belajar HTML5 Elemen Semantik HTML5
3. Pilih Banyak File
Untuk memungkinkan pengguna memilih beberapa file, Anda dapat <input> menambahkanmultiple atribut ke elemen. Berikut ini contoh kode:
<input type="file" onchange="readFiles(event)" multiple>4. Pilih File Dengan Drag and Drop
Kita dapat menggabungkan file API HTML5 dan elemen drag and drop HTML5 untuk memilih file. Metode pemilihan file ini mengharuskan pengguna untuk menarik dan melepas file dari sistem file komputer lokal (di luar browser) ke area penempatan yang ditentukan pada halaman HTML browser. Halaman HTML dapat menggunakan javascript untuk mendeteksi apakah sebuah file ditempatkan di area yang ditentukan.
Kode berikut adalah cara mengatur elemen HTML drop area sehingga dapat mendeteksi apakah ada file yang ditempatkan di dalamnya.
<div id="fileDropZone" >
Drag and Drop File Here
</div> <script>
function drop(event) {
evt.stopPropagation();
evt.preventDefault();
var fileList = event.dataTransfer.files;
// Receive files via fileList
}
function dragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = 'copy';
}
var dropZone = document.getElementById("fileDropZone");
dropZone.addEventListener("dragover", dragOver, false);
dropZone.addEventListener("drop" , drop , false);
</script> dragOver() Dan fungsi drop() mengatur monitoring event drag and drop dari elemen HTML di area drop.
Ketika sebuah file ditempatkan di area drop, fungsi drop() tersebut akan dipanggil. Daftar file yang ditempatkan di area drop dapat ditemukan oleh event.dataTransfer.files objek (sebuahFileList objek).
dragOver() Fungsinya opsional. Ini hanya digunakan untuk salinan file saat di drag. Dan ditampilkan oleh ikon file.
Sisa kode ini untuk mengakses file yang dipilih, yang di input sama dengan operasi setelah memilih file berdasarkan elemen.
Dalam operasi aktual, yang terbaik adalah mengatur beberapa style untuk elemen HTML dari area peletakan. Sehingga pengguna dapat dengan jelas menentukan area yang dapat diseret dan dilepaskan.
Baca Juga : Belajar HTML5 Elemen Header Dan Footer HTML5
5. Mengakses File Yang Dipilih
Setelah pengguna memilih file satu atau lebih, ada dua cara untuk mengakses file yang dipilih ini.
Cara pertama untuk mengakses file yang dipilih adalah dengan mengakses input elemen filesatribut. Berikut ini contoh kodenya:
var inputField = document.getElementById('theFileInput');
var selectedFiles = inputField.files;
for(var i=0; i<selectedFiles.length; i++) {
var file = selectedFiles[i);
} Cara kedua untuk mengakses file yang dipilih adalah melalui monitoring event input elemen onchange. File yang dipilih event akan diteruskan sebagai parameter objek. Berikut ini contoh kodenya:
<input type="file" onchange="readFiles(event)" multiple>
<script>
function readFiles(event) {
var fileList = event.target.files;
}
</script> event.target.files Objek adalah FileList objek. Ini berisi satu set file ( Fileobjek) yang dipilih. Jika hanya satu file yang dipilih, hanya ada satu objek dalam daftar ini. Kode contoh berikut menggambarkan cara mengulang daftar file.
<input type="file" onchange="readFiles(event)" multiple>
<script>
function readFiles(event) {
var fileList = event.target.files;
for(var i=0; i < fileList.length; i++ ) {
var file = fileList[i]; // a File object
console.log("i: " + i + " - " + file.name);
}
}
</script> FileList adalah sebuah File daftar objek. File Objek digunakan untuk mengakses file. Dalam penjelasan labkom99 berikut, Anda akan melihat berbagai cara untuk memuat file melalui javascript.
Baca Juga : Belajar HTML5 Elemen Navigasi HTML5
6. Memuat File Melalui FileReader
Saat pengguna memilih file. Kami mendapatkan referensi ke file misalnya melalui onchangeevent. Kita bisa membaca FileReader file ini sampai selesai. Objek FileReader memiliki metode berikut yang dapat digunakan untuk membaca file:
- readAsText()
- readAsDataUrl()
- readAsArrayBuffer()
Semua metode di atas menggunakan File objek atau Blob objek sebagai parameter.
File Objek bisa didapat dari FileList objek, seperti yang dijelaskan sebelumnya.
Objek Blob mewakili sebagian atau seluruh file. Anda dapat membuat File objek Blob dari objek tersebut, berikut ini contoh kodenya:
var theFile = fileList[0]; // Get a File object from FileList
var from = 3;
var to = 9;
var blob = theFile.slice(from, to); // create a Blob objectKode di atas menggunakan metode slice untuk membagi file. Objek Blob dimulai dari file byte ke-3 dan berakhir pada byte ke-8 (tidak termasuk byte ke-9).
7. Membuat FileReader
Untuk menggunakan FileReader, Anda harus membuat objek FileReader terlebih dahulu. Metode pembuatan objek FileReader adalah sebagai berikut:
var reader = new FileReader(); Setelah objek FileReader dibuat, Anda dapat menggunakannya untuk membaca file.
Baca Juga : Belajar HTML5 Elemen Article Dan Elemen Aside HTML5
8. Memuat File Sebagai Teks
Untuk memuat file sebagai teks, Anda dapat menggunakan objek FileReader file API HTML5. Berikut ini contoh kodenya:
<input type="file" onchange="readFiles(event)" multiple>
<script>
function readFiles(event) {
var fileList = event.target.files;
for(var i=0; i <fileList.length; i++) {
loadAsText(fileList[i]);
}
}
function loadAsText(theFile) {
var reader = new FileReader();
reader.onload = function(loadedEvent) {
// Return the file containing the loaded
console.log(loadedEvent.target.result);
}
reader.readAsText(theFile);
}
</script>File loadAsText() dimuat dalam fungsi tersebut.
Kode di atas pertama kali membuat objek FileReader dan kemudian FileReader memanggil onload event pada objek yang dipanggil setelah file dimuat.
Berikutnya, FileReader dalam fungsi readAsText()dipanggil menggunakan objek File sebagai parameter. Di sinilah awal loading file, saat file di-load onload event akan dipanggil.
9. Memuat Beberapa File API HTML5
Anda hanya dapat memuat bagian tertentu dari file bukan seluruh file. Fungsi loadAsTextSlice()menunjukkan cara menggunakan file API HTML5 untuk memuat bagian dari file.
function loadAsTextSlice(theFile) {
var start = 3;
var stop = 9;
var blob = theFile.slice(start, stop);
var reader = new FileReader();
reader.onload = function(loadedEvent) {
console.log(loadedEvent.target.result);
}
reader.readAsText(blob);
} Contoh di atas membuat objek dengan metode objek File. Kemudian membuat objek, lalu menambahkan event listener di atasnya.
Berikutnya Objek FileReader dalam readAsText() dipanggil, dan parameternya adalah objek Bolb. Ini adalah awal pembacaan file. Saat bagian file ini dibaca, metode onload() akan dipanggil. Untuk mendapatkan bagian dari file yang akan dibaca, Anda bisa mendapatkannya melalui loadedEvent.target.result.
10. Memuat File Melalui URL
Kami juga dapat memuat file melalui URL. Contoh tipikal adalah dengan menggunakan data gambar. Kami dapat membaca data gambar dan kemudian mengatur data ke src properti gambar. Fungsi berikut loadAsUrl() menunjukkan cara menggunakan file API HTML5 untuk membaca file sebagai data URL.
function loadAsUrl(theFile) {
var reader = new FileReader();
reader.onload = function(loadedEvent) {
var image = document.getElementById("theImage");
image.setAttribute("src", loadedEvent.target.result);
}
reader.readAsDataURL(theFile);
} Dalam kode di atas, sebuah objek FileReader pertama kali dibuat, dan kemudian event listener FileReader diterapkan pada objek onload(). Saat file dimuat, event onload() akan diproses. Parameter onload() fungsinya adalah loadedEvent. Melalui parameter ini, kita bisa mendapatkan data file yang dikodekan sebagai data URL menggunakan event.target.resultatribut. Setelah mendapatkan data file yang disandikan, kita dapat mengatur nilai data tersebut sebagai atribut src gambar, sehingga gambar akan ditampilkan.
Baca Juga : Belajar HTML5 Elemen Time HTML5
