Contoh penggunaan api file html5 untuk membaca file lokal (seperti gambar, PDF, dll.)

Di era HTML4, jika kita ingin menampilkan gambar lokal pengguna di halaman web, pengguna perlu mengunggah gambar tersebut ke server terlebih dahulu, lalu mengunduh gambar tersebut sesuai dengan alamat gambar yang disediakan oleh server sebelum gambar tersebut dapat ditampilkan pada halaman web. Bolak-balik ini memakan biaya setidaknya dua kali lipat lalu lintas gambar ini, belum lagi sumber daya yang dihabiskan oleh server untuk menyimpan gambar ini dan biaya yang tidak adil dari pengguna yang mengunggah gambar yang salah (karena di era HTML4, pengguna memilih Setelah mengunggah sebuah gambar, seringkali Anda hanya dapat melihat nama file gambar tersebut, dan Anda tidak dapat memastikan lebih lanjut apakah gambar tersebut adalah gambar yang ingin Anda unggah dengan mempratinjaunya).

HTML5 menyediakan cara baru untuk bermain. Dengan browser saja, Anda dapat merender, membaca, dan memproses file lokal (sebenarnya, bisa juga jarak jauh) (terutama gambar), dan semua ini dilakukan melalui API File HTML5 meraih.

Yang pertama adalah struktur data. HTML5 mendefinisikan tipe objek file untuk mewakili file, dan setiap objek file berhubungan dengan sebuah file. Objek file memiliki tiga atribut: nama, ukuran, dan jenis. name adalah nama file tanpa path, size adalah ukuran file dalam byte, dan type adalah MIME file (seperti gambar/jpg).

Objek file tidak ada sendiri, melainkan berbentuk array, dalam array bernama FileList. Jadi, bagaimana cara mendapatkan array FileList ini? Saat ini, ada dua cara untuk mendapatkan FileList di HTML5, satu melalui input jenis file, dan yang lainnya melalui event drop operasi drag and drop.

Dapatkan FileList melalui input jenis file

 <input id=file-input type=file />

Atau atribut multiple baru di HTML5 yang memungkinkan pemilihan banyak file:

 <input id=file-input type=file banyak />

Umumnya kita melampirkan event onchange ke input:file sehingga setelah pengguna memilih file, langkah selanjutnya seperti membaca file dapat langsung dilakukan:

 //jsvar inputElement = document.getElementById(file-input);inputElement.addEventListener(perubahan, handleFiles, false);function handleFiles() { var fileList = this.files; ').on('perubahan', function() { var fileList = this.files;});

Pertama, atur area untuk drag and drop:

 <div id=dropbox style=lebar: 200 piksel; tinggi: 200 piksel;></div>

Selain itu, untuk memicu kejadian drop, kita harus mencegah perilaku default kejadian dragenter dan dragover:

 var dropbox;dropbox = document.getElementById(dropbox);dropbox.addEventListener(dragenter, dragenter, false);dropbox.addEventListener(dragover, dragover, false);dropbox.addEventListener(drop, drop, false);fungsi dragenter(e) { e.stopPropagation(); e.preventDefault();}fungsi dragover(e) { e.stopPropagation(); e.preventDefault();}

Kemudian, kita bisa mendapatkan fileList di callback event drop:

 fungsi drop(e) { e.stopPropagation(); e.preventDefault(); var dt = e.dataTransfer; var files = dt.files;

HTML5 menyediakan dua solusi: FileReader dan ObjectUrl.

Pertama, Anda perlu membuat instance objek FileReader:

 var pembaca = FileReader baru();

Menggunakan FileReader untuk membaca objek file adalah proses asinkron. Kita perlu menyetel callback event load untuk FileReader terlebih dahulu untuk memberi tahu FileReader operasi selanjutnya apa yang harus dilakukan setelah membaca data objek file:

 reader.onload = function(e) { document.getElementById(image).src = e.target.hasil }

Maksud dari kode diatas adalah setelah FileReader membaca data gambar, maka data tersebut (DataUrl) dimasukkan ke dalam atribut src.

Terakhir, berbagai metode FileReader digunakan untuk memutuskan format data apa yang akan digunakan untuk menyimpan data objek file setelah membacanya, dan mengimplementasikan pembacaan:

1. readAsArrayBuffer(file): Baca objek file dan simpan sebagai objek ArrayBuffer (Saya belum mengetahui apa itu objek ArrayBuffer, itu harus berupa struktur data yang dihasilkan untuk akses data yang efisien).
2. readAsText(file [, 'UTF-8']): Membaca objek file dalam mode teks umum. Perlu dicatat bahwa parameter kedua (opsional) dapat digunakan untuk menentukan pengkodean karakter.
3. readAsDataURL(file): Membaca objek file dan menyimpannya sebagai string dalam format data: URL.

ObjectURL setara dengan jalur sementara ke file. Jalur sementara ini dapat dibuat dan dilepaskan kapan saja. Saat digunakan di browser lokal, tidak ada bedanya dengan URL biasa.

Ambil contoh menampilkan gambar lokal di halaman:

 var img = dokumen.createElement(img);img.src = window.URL.createObjectURL(file);

Saat ini, src terlihat seperti: blob:http://test.local.com/e03e8bbf-66ce-4fea-a8c8-772f9fdb4d40

Menggunakan src ini memungkinkan browser membaca gambar secara lokal.

Dibandingkan dengan menggunakan FileReader untuk menghasilkan pengkodean gambar base64 dan memasukkannya ke dalam src, kinerja solusi ini telah meningkat pesat.

Membandingkan dua solusi untuk membaca objek File, FileReader cocok untuk mengunggah file, sedangkan ObjectURL cocok untuk beroperasi langsung di browser, dan kemudian mengunggah data yang diproses setelah operasi, seperti menggunakan kanvas untuk mengambil tangkapan layar atau melakukan kompresi gambar, dll. . Tentu saja, ini semua tergantung kompatibilitasnya.

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.