HTML5 File Unggah Unduh Kode Instance

File API yang disediakan di HTML5 memiliki banyak aplikasi di ujung depan. Dan kompatibilitas masing -masing browser juga lebih baik, termasuk terminal seluler, kecuali untuk IE hanya mendukung versi IE10 atau lebih tinggi. Jika Anda ingin menguasai fungsi file operasi dengan lebih baik, Anda harus terlebih dahulu membiasakan setiap API.

Label input [type = file] dalam HTML memiliki banyak atribut, memungkinkan pengguna untuk memilih beberapa file, dan objek FileList berarti daftar file yang dipilih oleh pengguna. Setiap file dalam daftar ini adalah objek file.

1. Atribut objek file:
2. Nama: Nama file, tidak termasuk jalur.
3. Jenis: Jenis File. File jenis file akan dimulai dengan gambar/, yang dapat dibatasi pada unggahan gambar.
4. Ukuran: Ukuran file. Operasi lain dapat dilakukan sesuai dengan ukuran file.
5. LastModify: Waktu modifikasi akhir file.

 <input type = file id = multiple> <script> var elem = document.geteLementById ('file'); adalah gambar dan ukuran file kurang dari 200kb if (file [i] .type.indexof ('image/')! == -1 && file [i] .Size <204800) {console.log (file [i] .Name);}}} </script>

Ada atribut akses dalam input yang dapat digunakan untuk menentukan jenis file yang dapat dikirimkan dengan unggahan file.

Terima = gambar/* dapat digunakan untuk membatasi hanya untuk mengunggah format gambar. Namun, ada masalah dengan respons lambat di bawah browser Webkit.

Solusinya adalah mengubah* pass ke tipe MIME yang ditentukan.

 <input type = file accept = gambar/gif, gambar/jpeg, gambar/jpg, gambar/png>

Objek Blob setara dengan wadah yang dapat digunakan untuk menyimpan data biner. Ini memiliki dua atribut, atribut ukuran mewakili panjang byte, dan atribut tipe mewakili tipe MIME.

Cara membuat

Objek Blob dapat dibuat menggunakan fungsi konstruk Blob ().

 var blob = new blob (['hello'], {type: text/polos});

Parameter pertama dalam konstruktor Blob adalah array yang dapat menyimpan objek ArrayBuffer, objek ArrayBufferView, objek gumpalan dan string.

Objek Blob dapat mengembalikan objek gumpalan baru melalui metode SLICE ().

 var newBlob = blob.slice (0,5, {type: text/polos});

Metode SLICE () menggunakan tiga parameter, semuanya opsional. Parameter pertama mewakili posisi mulai dari data biner dalam objek Blob, parameter kedua mewakili ujung replikasi, dan parameter ketiga adalah tipe MIME dari objek gumpalan.

Canvas.toBlob () juga dapat membuat objek gumpalan. Toblob () menggunakan tiga parameter, yang pertama adalah fungsi callback, yang kedua adalah jenis gambar, standarnya adalah gambar/png, yang ketiga adalah kualitas gambar, nilainya antara 0 dan 1.

 var canvas = document.geteLementById ('canvas');

Objek Blod dapat menghasilkan alamat jaringan melalui objek window.url, dikombinasikan dengan atribut unduhan tag untuk mencapai fungsi file unduhan.

Misalnya, unduh kanvas sebagai file gambar.

 var canvas = document.geteLementById ('canvas'); var url = url.createObject "blob); var a = document.createElement ('a'); a.download = 'canvas'; a.href = url; // mensimulasikan tag untuk mengunduh a.click (); / / Beri tahu browser setelah mengunduh.

String juga dapat disimpan sebagai file teks dengan metode serupa.

Objek Filereader terutama digunakan untuk membaca file ke dalam memori dan membaca data dalam file. Buat objek filereader dengan membangun fungsi

 var reader = new filerereader ();

Objek memiliki metode berikut:

1. Abort: Operasi baca interupsi.
2. ReadArArrayBuffer: Baca konten file ke objek ArrayBuffer.
3. ReadasBinaryString: Baca file sebagai data biner.
4. ReadasDataurl: Baca file sebagai data: format URL.
5. Readastext: Baca file sebagai teks.

Aplikasi umum adalah untuk menampilkan gambar melalui readasdataurl () setelah mengunggah gambar pada klien.

 <input type = file id = file terima = gambar/jpeg, gambar/jpg, gambar/png> <img src = blank.gif id = preview> <script> var elem = d ('file'), img = dokumen. GetElementById ('Pratinjau'); .src = ev.target.Result;} reader.readasDataurl (file [0]);}} </skrip>

Namun, ketika Anda mengambil gambar di beberapa ponsel, akan ada bug saat mengunggah foto, dan foto akan ditemukan, termasuk Samsung dan iPhone. Esensi Esensi Solusinya tidak menjelaskan di sini.

Readastext () dari objek filereader dapat membaca teks file, dikombinasikan dengan fungsi objek gumpalan untuk mengunduh file, kemudian file ekspor data adalah cadangan ke area lokal. melalui input dan gunakan readastext () untuk menggunakan readastext () Baca teks dan mengembalikan data.

Kode ini mirip dengan fungsi di atas.

Metode ATOB dan BTOA ditambahkan ke HTML5 untuk mendukung pengkodean Base64. Penamaan mereka juga sangat sederhana.

 var a = https: //lin-xin.github.io; iconsole.log (b);

Metode BTOA mengkodekan string A, yang tidak akan mengubah nilai a, dan mengembalikan nilai setelah pengkodean.

Metode ATOB memecahkan kode string yang dikodekan.

Namun, orang Cina dalam parameter telah melampaui kisaran karakter encoding ASCII 8 -bit, dan browser akan melaporkan kesalahan. Oleh karena itu, Anda perlu menyandikan komponen enkodeurik terlebih dahulu.

 var a world;

Di atas adalah semua isi artikel ini.