Unggah file aplikasi HTML5

Untuk waktu yang lama, pengembang telah tertekan dengan ini. Beberapa situs web menggunakan Atribut Formulir Enableype = Multipart/Form-Data, tetapi atribut ini mengharuskan server untuk membuat pengaturan khusus untuk menampilkan kemajuan, dan juga rumit kami.

Sekarang mari kita lihat mengapa HTML5 dapat menyelesaikan masalah ini, dan seberapa baik bisa melakukannya.

Dalam standar HTML5, objek XMLHTTPRequest didefinisikan ulang, dikenal sebagai XMLHTTPREQuest Level 2, yang berisi 5 fitur baru berikut:

1. Dukungan Upload dan Unduh byte, seperti file, gumpalan, dan data formulir

2. Menambahkan kemajuan pengunggahan dan pengunduhan

3. Dukungan Permintaan Salib -Domain

4. Izinkan permintaan anonim (yaitu, bagian referensi yang tidak mengirim http)

5. Biarkan waktu habis permintaan

Dalam tutorial ini, kami terutama memperhatikan fitur pertama dan kedua, terutama item kedua-dapat memberikan kemajuan unggahan yang kami inginkan. Berbeda dengan paket sebelumnya, solusi ini tidak memerlukan server untuk membuat pengaturan khusus, sehingga semua orang dapat mencobanya dengan melihat tutorial.

Diagram di atas adalah konten yang dapat kami capai:

1. Tampilkan informasi file yang diunggah, seperti nama file, ketik, ukuran

2. Bilah kemajuan yang dapat menunjukkan kemajuan nyata

3. Kecepatan mengunggah

4. Estimasi sisa waktu

5. Jumlah data yang telah diunggah

6. Respons server yang dikembalikan setelah unggahan selesai

Selain itu, dengan XMLHTTPREQUEST, proses unggahan kami tidak sinkron, jadi ketika pengguna mengunggah file, itu masih dapat mengoperasikan elemen lain di halaman web, dan tidak perlu menunggu untuk mengunggah untuk diselesaikan. Setelah unggahan selesai, kita bisa mendapatkan respons dari server kembali, sehingga seluruh proses unggahan cukup logis.

HTML5 Menambahkan Acara Kemajuan Baru, yang memberi kami informasi berikut:

1. Total -Ukuran File

2. dimuat -ukuran yang diunggah

3.

Tidak ada banyak informasi, tetapi cukup untuk menghitung kemajuan file. Tentu saja, masih ada banyak hal yang tidak diberikannya secara langsung, yang sangat disayangkan.

Ini tidak jauh berbeda dari kode unggahan file biasa. Namun, perhatikan bahwa tag input mengaitkan fungsi JavaScript pada Onchange.

 <! Row> <label untuk = filetouplead> Pilih file untuk mengunggah </label> <input type = file nama = filetouplead id = filetouplead = fileelec ted ();/> </div> <v id = filename> </div> <Div ID = FileSize> </div> <Div ID = FileType> </div> <div class = row> <input type = tombol onClick = unggahfile () value = unggah/> << Div

Setelah kami menggunakan input dalam HTML, kami bisa mendapatkan objek daftar file dalam kode JS. Objek ini adalah bagian dari file API yang baru ditambahkan di HTML5.

1. Nama - Nama file (tidak termasuk path)

2. Tipe -file Type (huruf kecil)

3. Ukuran -Ukuran File (Unit byte)

Inilah yang kita butuhkan. Tentu saja, HTML5 juga memiliki objek filereader, tetapi kami tidak menggunakannya di sini. Sekarang, melalui tiga konten di atas, kami dapat mengontrol ukuran dan jenis file yang diunggah oleh pengguna untuk mengurangi tekanan selama server dan meningkatkan faktor keamanan.

 Function Filected () {var file = document.geteLementById ('FileTouplead'). .size * 100 / (1024 * 1024)) / 100) .tring () + 'mb'; Document.getElementById (nama file ') 'Type:' + file.type;}}

Jadi apa yang akan terjadi ketika pengguna memilih file yang bagus dan klik unggah?

 Function unggahan () {var xhr = new XmlHttProySeest (); ; send (fd);} unggah unggah (evt) {if (evt.lengthcomputable) {var persen complete = math.round. ) + '%';} Else {document.gtelementById ('progressNumber') .innerHtml = 'tidak dapat menghitung';}} ​​function uploadComplete (evt) { / * Acara ini diangkat ketika server mengirim kembali respons * / waspada (evt.target.Responsetext);

Di baris kode kedua, kode JS kami menggunakan objek baru lainnya -FormData yang diluncurkan oleh HTML5 lain. Objek FormData adalah set data formulir pengguna. Kami mengirimkan data ke server dengan memutar objek ini.

Tentu saja, kita juga dapat membangun objek ini secara manual dalam kode, misalnya, seperti yang berikut:

 var = FormData baru (); ]);

Kembali ke topik. Melihat kembali kode sebelumnya, kami menambahkan banyak pemantauan peristiwa XMLHTTPREQUEST. Secara khusus, penting untuk dicatat bahwa apa yang kami tautkan bukanlah xmlhttprequest itu sendiri, tetapi atributnya, seperti unggahan.

Akhirnya, lihat kode lengkapnya.

 <! [0]; ) + 'MB'; .name; fd.parpend (filetouplead, document.geteLementById ('filetouplead'). File [0]); false); PersentComplete = Math.Round (EV.Loaded * 100 / EVT.Total); untuk menghitung '; Oleh pengguna atau browser menjatuhkan koneksi.);} </script> </head> <tomody> <Form ID = form1 enctype = Metode multipart/form-data = POST ACTION = UEDLOAD.PHP> <DIV class = baris > <Label = FileToup Load> Pilih file untuk mengunggah </label> <input type = file name = filetoupload id = filetoupload onchange = fileselect ();/> </div> <Div ID = filename> </div> < Div id = fi lesize> </div> <div id = filetype> </div> <div class = row> <input type = tombol onclick = unggahfile () value = unggah/> </div m> </body> </html>

Apakah tugas kami selesai? Dapat dikatakan bahwa itu lengkap, karena kode ini telah dapat menyelesaikan tugas mengunggah file, dan itu juga dapat menampilkan kemajuan pengunggahan; tetapi harus dikatakan bahwa kita tidak, karena kecuali untuk kerangka ini HTML, Kami memiliki banyak hal yang belum dilakukan, seperti CSS, seperti CSS mempercantik dan sebagainya. Tapi ini bukan tema artikel kami.

Akhirnya, ingatkan Anda bahwa kode tutorial harus dioperasikan di browser yang mendukung fitur baru.

Di atas adalah semua isi artikel ini.