Ngomong -ngomong, hari ini saya baru saja melihat kode sumber SwitchySharp proxy dan mendapatkan banyak hal, termasuk membaca dan menyimpan file yang akan diperkenalkan dalam artikel ini.
Karena Google tidak menyediakan fungsi menyinkronkan data plug-in, mengimpor dan mengekspor konfigurasi plug-in harus ditangani dengan file. Untuk alasan keamanan, hanya IE yang menyediakan API untuk mengakses file; Tetapi dengan kedatangan HTML 5, browser lain juga mendukungnya.
Pertama, mari kita bicara tentang membaca file. W3C menyediakan beberapa file API, yang paling penting adalah kelas filereader.
Daftar Pertama Tag HTML yang Anda butuhkan:
Salin kode kode sebagai berikut: <input type = "file" id = "file" onchange = "handleFiles (this.files)"/>
Ketika file dipilih, daftar yang berisi file (objek daftar file) akan diteruskan sebagai parameter ke fungsi handleFiles ().
Objek daftar file ini mirip dengan array, yang dapat memberi tahu jumlah file, dan elemen -elemennya adalah objek file.
Dari objek file ini, Anda bisa mendapatkan atribut seperti nama, ukuran, LastModiedDate dan ketik.
Lewati objek file ini ke metode baca dari objek filereader dan Anda dapat membaca file.
Ada 4 metode membaca di Filereader:
1. ReadASArrayBuffer (File): Baca file sebagai ArrayBuffer.
2. ReadasBinaryString (File): Baca file sebagai string biner
3.readasDataurl (file): Baca file sebagai URL data
4. Readastext (file, [encoding]): Membaca file sebagai teks, nilai pengkodean default adalah 'UTF-8'
Selain itu, metode abort () dapat berhenti membaca file.
Objek Filereader perlu diproses setelah membaca file. Agar tidak memblokir utas saat ini, API mengadopsi model acara, yang dapat mendaftarkan acara ini:
1.onabort: dipicu saat terputus
2.onerror: dipicu saat kesalahan terjadi
3.onload: dipicu saat file berhasil dibaca
4.onloadEnd: dipicu saat file dibaca, terlepas dari apakah itu gagal atau tidak
5.onloadStart: dipicu saat file mulai membaca
6.onprogress: pemicu secara berkala saat file dibaca
Dengan metode ini, Anda dapat memproses file.
Mari kita coba membaca file teks terlebih dahulu:
Salinan kode adalah sebagai berikut:
function handleFiles (file) {
if (file.length) {
var file = file [0];
var reader = new filereader ();
if (/text///w+/.test(file.type)) {
reader.onload = function () {
$ ('<pr Pre>' + this.Result + '</pr Pre>'). appendTo ('body');
}
reader.readastext (file);
}
}
}
This.Result di sini sebenarnya adalah Reader.Result, yang merupakan konten file baca.
Setelah pengujian, Anda akan menemukan bahwa konten file ini telah ditambahkan ke halaman web. Jika Anda menggunakan Chrome, Anda harus meletakkan halaman web di server atau di plug-in, dan protokol file akan gagal.
Mari kita coba gambar lagi, karena browser dapat secara langsung menampilkan gambar protokol data URI, jadi tambahkan gambar kali ini:
Salinan kode adalah sebagai berikut:
function handleFiles (file) {
if (file.length) {
var file = file [0];
var reader = new filereader ();
if (/text///w+/.test(file.type)) {
reader.onload = function () {
$ ('<pr Pre>' + this.Result + '</pr Pre>'). appendTo ('body');
}
reader.readastext (file);
} lain jika (/gambar /// w+/. test (file.type)) {
reader.onload = function () {
$ ('<img src = "' + this.Result + '" />'). Lampai('body ');
}
reader.readasdataurl (file);
}
}
}
Bahkan, input: kontrol file juga mendukung pemilihan beberapa file:
Salinan kode adalah sebagai berikut:
<input type = "file" id = "file" multipel = "" onchange = "handlefiles (this.files)"/>
Dengan cara ini, handleFiles () perlu dilalui untuk memproses file.
Jika Anda hanya ingin membaca sebagian dari data, objek file juga memiliki metode WebKitslice () atau Mozslice (), yang digunakan untuk menghasilkan objek gumpalan. Objek ini dapat dibaca oleh filereader seperti objek file. Dua metode ini menerima 3 parameter: parameter pertama adalah posisi awal; Yang kedua adalah posisi akhir, dan ketika dihilangkan, akhir file dibaca; Yang ketiga adalah tipe konten.
Sebagai contoh, silakan merujuk ke "Membaca File Lokal di JavaScript".
Tentu saja, selain mengimpor data dan menampilkan file, itu juga dapat digunakan untuk unggahan AJAX. Kode dapat digunakan untuk merujuk ke "Menggunakan File dari Aplikasi Web".
Selanjutnya, simpan file.
Faktanya, API File: Penulis menyediakan 4 antarmuka, tetapi saat ini hanya beberapa browser (Chrome 8+ dan Firefox 4+) mengimplementasikan BlobBuilder, dan seluruh antarmuka tidak tersedia.
Untuk browser yang tidak didukung, Anda dapat menggunakan blobbuilder.js dan filesaver.js untuk mendapatkan dukungan.
Saya mempelajarinya dan menemukan misteri itu.
Blobbuilder dapat membuat objek gumpalan. Lewati Objek Blob ini ke metode URL.CreateObjecTURl () dan Anda bisa mendapatkan URL objek. Dan url objek ini adalah alamat unduhan objek gumpalan ini.
Setelah mendapatkan alamat unduhan, buat elemen A, tetapkan alamat unduhan ke atribut href, dan tetapkan nama file ke atribut unduhan (didukung oleh chrome 14+).
Kemudian buat acara klik dan serahkan ke elemen ini untuk diproses, yang akan menyebabkan browser mulai mengunduh objek gumpalan.
Akhirnya, gunakan url.revokeObjecturl () untuk melepaskan URL objek, memberi tahu browser bahwa itu tidak harus terus merujuk file tersebut.
Berikut ini kode yang disederhanakan:
Salinan kode adalah sebagai berikut:
var blobbuilder = blobbuilder || WebKitBlobBuilder || Mozblobbuilder;
var url = url || WebKiturl || jendela;
fungsi saveas (gumpalan, nama file) {
var type = blob.type;
var force_saveable_type = 'application/octet-stream';
if (type && type! = force_saveable_type) {// force download, tidak terbuka di browser
var slice = blob.slice || Blob.webkitslice || Blob.Mozslice;
blob = slice.call (blob, 0, blob.size, force_saveable_type);
}
var url = url.createObjecturl (blob);
var save_link = document.createelementns ('http://www.w3.org/1999/xhtml', 'a');
save_link.href = url;
save_link.download = nama file;
var event = document.createEvent ('mouseEvents');
event.initmouseEvent ('klik', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, false, 0, null);
save_link.dispatchevent (acara);
Url.revokeObjecturl (url);
}
var bb = blobbuilder baru;
BB.Append ('Halo, Dunia!');
saveas (bb.getBlob ('text/polos; charset = utf-8'), 'halo world.txt');
File teks akan diminta untuk menyimpan selama pengujian. Chrome perlu menempatkan halaman web di server atau di plug-in.