Artikel ini berbagi tiga metode pengunggahan asinkron Java untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
Metode pertama yang mengunggah menggunakan plug-in browser membutuhkan keterampilan pengkodean yang mendasarinya. Saya tidak akan membicarakannya di sini, agar tidak menyesatkan anak -anak orang. Jika Anda mempertimbangkan ini, Anda dapat Baidu sendiri.
Tipe kedua menggunakan iframe tersembunyi untuk mensimulasikan unggahan asinkron . Mengapa kita berbicara tentang simulasi di sini? Karena kami benar -benar meletakkan hasil pengembalian di iframe tersembunyi, jadi kami tidak membuat lompatan halaman saat ini, yang terasa seperti operasi yang tidak sinkron.
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> file unggah iframe tersembunyi </iteme> <script type = "text/javascript" src = "jQuery Path ..."> </script> </head> <body> <iframe name = "frm" form ": no levely" </script> </head> <body> <iframe name = "frm" gaya "; enctype = "multipart/form-data" metode = "post" target = "frm" onsubmit = "memuat (true);"> <p id = "upfile"> lampiran: <input type = "file" name = "myfile" style = "display: inline"> <p> <p id = "upbtn"> <input "pad: lee-rding: lee-lee; 50 lee; 50 lee; 50 lee; 50 pad: lee-rding: lee-rding: lee; 50 pad: lee-rding: lee: lee-rding: lee; type="submit" value="asynchronous upload"> <span id="uptxt" style="display: none">Uploading...</span> </p></form><div id="flist" style="border:1px dotted darkgray;"></div><script> // Callback function uploadFinished(fileName) { addToFlist(fileName); memuat (salah); } function addtoflist (fname) {var temp = ["<p id = '" + fname + ">", fname, "<tombol onclick =' delfile (/" " + fname +"/"); '> hapus </butt>", "</p>"]; $ ("#flist"). append (temp.join (""));} function loading (showloading) {if (showloading) {$ ("#uptxt"). show (); } else {$ ("#uptxt"). Sembunyikan; }} </script> </body> </html> Ada dua poin utama dalam teknologi ini:
1.Form akan menentukan target, dan hasil yang dikirimkan akan dikembalikan ke iframe tersembunyi. (mis. Target formulir konsisten dengan atribut nama iframe).
2. Setelah pengiriman selesai, halaman di Iframe berkomunikasi dengan halaman utama. Bagaimana cara memberi tahu hasil unggahan dan informasi file server berkomunikasi dengan halaman utama?
Setelah menerima file, kami menggunakan nodeJs untuk mengembalikan metode yang ditentukan oleh window.parent. halaman utama. Setelah dieksekusi, kita dapat mengetahui bahwa unggahan file selesai. Kodenya sangat sederhana:
router.post('/upload2', multipartMiddleware, function(req, res) { var fpath = req.files.myfile.path; var fname = fpath.substr(fpath.lastIndexOf('//') + 1); setTimeout(function { var ret = ["<script>", "window.parent.uploadFinished('" + fname + ");", "</script>"]; Setelah eksekusi, Anda dapat membuka opsi pengembang dan Anda akan menemukan bahwa beberapa data yang dikembalikan dari iframe tersembunyi dikembalikan.
Tipe ketiga menggunakan XMLHTTPREQUEST2 untuk unggahan asinkron asli .
Atau posting kode terlebih dahulu:
Setelah eksekusi, Anda dapat membuka opsi pengembang dan Anda akan menemukan bahwa beberapa data yang dikembalikan dari iframe tersembunyi dikembalikan. Tipe ketiga menggunakan XMLHTTPREQUEST2 untuk unggahan asinkron asli. Mari kirimkan kode terlebih dahulu:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>xhr level2 asynchronous upload</title> <script type="text/javascript" src="jquery path..."></script> </head> <body> <div> <p id="upfile">Attachment: <input type="file" id="myfile" style = "display: inline"> </p> <p id = "upbtn"> <input style = "padding-left: 50px; padding-right: 50px;" type="button" value="asynchronous upload" onclick="upload;"> <span id="uptxt" style="display: none">Uploading...</span> <span id="upprog"></span> <button id="stopbtn" style="display:none;">Stop upload</button> </p> </div> <div id="flist" style="border:1px dotted darkgray; "> </div> <script> unggah fungsi {// 1. Siapkan formdata var fd = formdata baru; fd.append ("myfile", $ ("#myfile") [0] .files [0]); // Buat objek XHR var xhr = new XmlHttpRequest; // Dengarkan status dan respons secara real time // xhr dan xhr.upload memiliki kejadian kemajuan, xhr.progress adalah kemajuan unduhan, xhr.upload.progress adalah kemajuan unggah xhr.upload.onprogress = function (event) {if event.lengthComputable) {var persen = math.round = {event if ife (event.lengthal) {var persen = math.round. console.log ('%d%', persen); $ ("#upprog"). Teks (persen); }}; // Acara Mulai Transmisi xhr.onloadStart = function (event) {console.log ('muat start'); $ ("#upprog"). Teks ('Mulai unggah'); $ ("#stopbtn"). satu ('klik', fungsi {xhr.abort; $ (this) .hide ();}); memuat (benar); }; // Proses AJAX berhasil menyelesaikan acara xhr.onload = function (event) {console.log ('Load Success'); $ ("#UPPROG"). Teks ('Unggah sukses'); console.log (xhr.Responsetext); var ret = json.parse (xhr.Responsetext); addtoflist (ret.fname); }; // peristiwa kesalahan terjadi dalam proses AJAX xhr.onerror = function (event) {console.log ('error'); $ ("#UPPROG"). Teks ('Terjadi kesalahan'); }; // Ajax dibatalkan xhr.onabort = function (event) {console.log ('abort'); $ ("#upprog"). Teks ('operasi dibatalkan'); }; // Transmisi LoadEnd berakhir, dan akan dipicu terlepas dari keberhasilan atau kegagalan xhr.onloadEnd = fungsi (peristiwa) {console.log ('Load end'); memuat (salah); }; // memulai permintaan AJAX untuk mengirimkan data xhr.open ('post', '/unggah3', true); xhr.send (fd); } function addtoflist (fname) {var temp = ["<p id = '" + fname + ">", fname, "<tombol onclick =' delfile (/" " + fname +"/"); '> hapus </butt>", "</p>"]; $ ("#flist"). append (temp.join ("")); } function delfile (fname) {console.log ('untuk menghapus file:' + fname); // TODO: Harap terapkan} function loading (showloading) {if (showloading) {$ ("#uptxt"). Show (); $ ("#stopbtn"). show (); } else {$ ("#uptxt"). hide (); $ ("#stopbtn"). hide (); }} </script> </body> </html> Ada banyak kode, tetapi mudah dimengerti. Siapa pun yang menggunakan AJAX tahu bahwa objek XHR memberikan metode panggilan balik OnReadyStateChange untuk mendengarkan seluruh proses permintaan/respons. Ada beberapa peristiwa kemajuan lagi dalam spesifikasi XMLHTTPREQREATEST Level 2. Ada 6 acara di bawah ini:
1.LoadStart: dipicu ketika byte pertama dari data respons diterima.
2.Progress: Ini dipicu terus menerus selama penerimaan respons.
3.Ror: dipicu saat kesalahan terjadi dalam permintaan.
4.ABORT: dipicu saat koneksi diakhiri karena memanggil metode abort.
5.Load: dipicu saat data respons lengkap diterima.
6.LoadEnd: dipicu setelah komunikasi selesai atau kesalahan, dibatalkan, peristiwa memuat dipicu.
Kali ini kami dapat menafsirkan kode: Ketika acara transmisi dimulai, kami menambahkan acara klik pada tombol Stop Transmission, dan metode abort bawaan dapat menghentikan transmisi. Jika Anda tidak mengklik, itu akan diunggah secara normal sampai transmisi selesai. Kode latar belakangnya mirip dengan metode kedua.
Tiga metode ini memiliki kelebihan dan kekurangannya sendiri, mari kita buat ringkasan sederhana.
Kontrol pihak ketiga memiliki interaktivitas dan kemampuan kontrol yang baik, karena mereka dekat dengan lapisan bawah dan kinerjanya juga sangat baik. Namun, karena sulit untuk ditulis, Anda biasanya perlu menginstal plug-in sendiri, dan kadang-kadang Anda mungkin perlu menulisnya sendiri.
Saya pribadi berpikir metode iframe tersembunyi adalah metode yang sangat bijaksana. IfRame dapat membantu kami melakukan banyak hal. Pendekatan ini memiliki kompatibilitas browser yang luas dan tidak memerlukan plugin untuk diinstal. Namun, ia memiliki interaktivitas yang buruk, proses unggahan yang tidak terkendali, dan kinerjanya juga sangat rata -rata.
Untuk level xhr2, unggah Ajax murni, ia harus memiliki browser dengan versi yang lebih tinggi (IE9+). Tetapi memiliki interaktivitas yang sangat baik, Anda dapat melihat kemajuan unggahan dan dapat dikendalikan.
Pengembangan dapat dilakukan secara berbeda sesuai dengan persyaratan. Saya pribadi berpikir bahwa mengunggah file -file ini, terutama yang kedua, memberikan semacam ide, yang sepenuhnya memanfaatkan karakteristik tag HTML tertentu, mungkin merupakan sesuatu yang perlu dipikirkan oleh pengembang kami.
Di atas adalah semua tentang artikel ini, saya harap ini akan membantu untuk pembelajaran semua orang.