HTML5 melaksanakan contoh untuk mengakses fail tempatan_html5 kemahiran tutorial

Dalam artikel sebelumnya, saya berkongsi beberapa contoh HTML5 dengan anda, termasuk demonstrasi fungsi seret dan lepas, demonstrasi boleh edit kandungan halaman dan demonstrasi fungsi storan setempat. Hari ini, saya akan berkongsi dengan anda aplikasi mudah untuk menunjukkan cara menggunakan FileReader ialah API operasi fail yang disediakan dalam HTML5.

Apabila anda melihat contoh HTML 5 yang saya tulis sebelum ini, saya berfikir tentang mencipta contoh yang mudah tetapi boleh digunakan untuk mempraktikkan ciri HTML5 baharu ini dengan cara yang lebih baharu. Matlamat saya bukan untuk hanya menunjukkan API HTML 5 ini, tetapi menggunakan contoh untuk menunjukkan kepada pembangun cara melaksanakan API ini dengan cara yang praktikal dan inovatif.

Dalam HTML5, mengakses sistem fail tempatan daripada halaman Web menjadi sangat mudah, iaitu, menggunakan API Fail. Spesifikasi Fail ini menyediakan API untuk mewakili objek fail dalam aplikasi web Anda boleh memilihnya dan mengakses maklumatnya secara pengaturcaraan. API Fail ini termasuk:
Jujukan Senarai Fail, mewakili tatasusunan yang terdiri daripada fail individu yang dipilih dalam sistem setempat. Antara muka pengguna untuk memilih fail boleh dilaksanakan dengan memanggil .
Antara muka Blob, yang mewakili data binari mentah Melalui objek Blob, anda boleh mengakses data bait di dalamnya.
Antara muka fail, yang menyimpan maklumat atribut baca sahaja bagi fail, seperti nama fail, jenis fail dan alamat akses data fail.
Antara muka FileReader, yang menyediakan kaedah untuk membaca fail dan model acara untuk mendapatkan hasil pembacaan fail.
Antara muka FileError dan objek FileException, yang digunakan untuk menentukan keadaan ralat dalam spesifikasi ini.
Cara menggunakan contoh ini: Dalam contoh ini, saya telah memberikan papan seni dan anda boleh menyeret imej ke dalamnya daripada sistem fail setempat, atau anda juga boleh menggunakan kotak pemilihan fail untuk memilih imej. Dalam contoh, sila pilih fail imej sahaja, saya tidak menambah penapisan fail dan pemeriksaan jenis fail. Sila ambil perhatian bahawa tiada penyemak imbas yang melaksanakan HTML5 sepenuhnya Contoh ini perlu dijalankan pada penyemak imbas yang menyokong HTML5, seperti Firefox 3.5 atau lebih tinggi.

Kaedah utama untuk melaksanakan API Fail adalah sangat mudah, seperti di bawah:

Salin kod

Kodnya adalah seperti berikut:

imej fungsiSelected(myFail) {
untuk (var i = 0, f; f = myFiles[i]; i) {
var imageReader = new FileReader();
imageReader.onload = (function(aFile) {
return function(e) {
var span = document.createElement('span');
span.innerHTML = [''].join("); 🎜>dokumen. getElementById('thumbs').insertBefore(span, null);
})(f
imageReader.readAsDataURL(f);
fungsi dropIt(e) {
imagesSelected(e.dataTransfer.files);
e.stopPropagation(); 🎜>Saya pilih Letakkan acara ondrop saya pada :





Salin kod

Kodnya adalah seperti berikut:

id=”thumbs”> ;

Dalam contoh ini, saya hanya menyeret fail tempatan ke dalam artboard, tetapi saya rasa ia menunjukkan anda betapa mudahnya API Fail itu