Komentar: Hari ini, saya akan membagikan kepada Anda aplikasi sederhana untuk menunjukkan metode menggunakan filereader. Filereader adalah API operasi file yang disediakan di HTML5. Teman yang membutuhkannya bisa mempelajarinya.
Dalam artikel sebelumnya, saya telah berbagi beberapa contoh HTML5 dengan Anda, yaitu demonstrasi fungsi drag and drop, demonstrasi konten halaman yang dapat diedit, dan demonstrasi fungsi penyimpanan lokal. Hari ini, saya akan membagikan kepada Anda aplikasi sederhana untuk menunjukkan metode menggunakan FileReader, API Operasi File yang disediakan di HTML5.Ketika Anda melihat contoh HTML 5 yang saya tulis sebelumnya, saya berpikir untuk membuat contoh sederhana namun berlaku untuk mengebor fitur HTML5 baru ini dengan cara yang lebih aneh. Tujuan saya bukan untuk hanya menunjukkan API HTML 5 ini, tetapi menggunakan contoh untuk memberi tahu pengembang bagaimana benar -benar menerapkan API ini dengan cara yang praktis dan inovatif.
Di HTML5, mengakses sistem file lokal dari halaman web menjadi sangat sederhana, yaitu, menggunakan API file. Spesifikasi file ini menyediakan API untuk mewakili objek file dalam aplikasi web. Anda dapat memilih mereka dan mengakses informasi mereka melalui pemrograman. API file ini termasuk:
Urutan daftar file mewakili array masing -masing file yang dipilih dalam sistem lokal. Antarmuka pengguna yang digunakan untuk memilih file dapat diimplementasikan melalui <input type = file> panggilan.
Antarmuka gumpalan yang mewakili data biner asli, yang melaluinya Anda dapat mengakses data byte di dalamnya.
Antarmuka file berisi informasi atribut read-only dari suatu file, seperti nama file, jenis file, dan alamat akses data file.
Antarmuka filereader yang menyediakan metode untuk membaca file dan model acara yang mendapatkan hasil dari file yang dibaca.
Antarmuka FileError dan objek FileException yang mendefinisikan kondisi pembuatan kesalahan dalam spesifikasi ini.
Cara menggunakan contoh ini: Dalam contoh ini, saya memberikan artboard di mana Anda dapat menyeret dan menjatuhkan gambar dari sistem file lokal, atau Anda juga dapat menggunakan kotak pemilihan file untuk memilih gambar. Dalam contoh, harap hanya pilih file gambar, saya tidak menambahkan filter file dan pemeriksaan jenis file. Ingatlah bahwa tidak ada browser sepenuhnya mengimplementasikan HTML5. Contoh ini perlu dijalankan pada browser yang mendukung HTML5, seperti Firefox 3.5 atau lebih.
Metode utama untuk mengimplementasikan API file sangat sederhana, seperti halnya berikut:
fungsi imagesselected (myfiles) {
untuk (var i = 0, f; f = myfiles [i]; i ++) {
var imagereader = new filereader ();
imagereader.onload = (function (afile) {
fungsi pengembalian (e) {
var span = document.createElement ('span');
span.innerHtml = ['<img src = "', e.target.Result, '"/>']. gabungan ();
document.geteLementById ('thumbs') .InSertBefore (span, null);
};
})(F);
imagereader.readasdataurl (f);
}
}
function dropit (e) {
Imagesselected (e.datatransfer.files);
e.Stoppropagation ();
e.preventdefault ();
}
Saya memilih untuk menempatkan acara OnDrop saya di <td>:
<td align = ketinggian kiri = 105 ″ ontdragenter = return false oncragover = return false oncrop = dropit (event)>
<output ID = thumbs> </ output>
</td>
Dalam contoh ini, saya hanya menyeret file lokal ke artboard. Namun, saya pikir itu bisa menunjukkan kemampuan sederhana namun kuat dari file API