Ditulis sebelumnya:
Dalam beberapa hari terakhir, saya telah mempelajari unggahan file WebUploader. Blog sebelumnya mencatat contoh menggunakan WebUploader untuk cukup mengunggah file. Hari ini, saya juga akan merekam contoh fragmen dan breakpoint mengunggah. Di taman blog, saya juga telah melihat beberapa informasi. Pada dasarnya, pemrosesan data backend adalah servlets atau springmvc. Karena proyek baru -baru ini selalu menjadi Struts2, kami akan menggunakan tindakan di Struts2 untuk memproses data untuk mencapai efek mengunggah file dalam potongan.
1. Apa yang diunggah Shard?
Seperti namanya, itu berarti membagi file menjadi potongan -potongan, yaitu, membiarkan file dibagi menjadi beberapa file kecil, dan kemudian mengunggahnya. Keuntungan dari ini adalah memfasilitasi mengunggah file besar.
2. Ide Umum untuk Pengunggahan Shard:
1. Di halaman meja depan, pilih file dan klik tombol untuk mengunggah.
2. WebUploader membagi file yang diunggah menjadi nomor yang ditentukan dan mengirimkannya ke server backend satu per satu.
3. Server menerima file kecil yang terbagi dan menyimpannya di folder sementara.
4. Setelah server menerima file kecil yang terbagi, halaman latar depan mengeksekusi fungsi yang berhasil.
5. Dalam fungsi unggahan yang berhasil, kirim permintaan ke server dan permintaan untuk menggabungkan file kecil ke seluruh file.
6. Latar belakang server menggabungkan file dan menghapus file sementara yang menyimpan file kecil setelah penggabungan selesai.
Setelah memahami proses umum pengunggahan shard, silakan pergi ke demo.
Halaman Meja Depan:
<%@ page contentType = "text/html; charset = utf-8" bahasa = "java"%> <%string skema = request.getscheme (); String servername = request.getServerName (); String contextPath = request.getContextPath (); int port = request.getServerport (); // akses situs web dan jalur string BaseUrl = skema + ": //" + servername + ":" + port + contextPath; request.setAttribute ("baseurl", baseUrl);%> <html> <head> <title> Contoh sederhana mengunggah file dengan terfragmentasi </itement> <%-memperkenalkan gaya CSS-%> <tautan href = "$ {baseurl} /webuploaderer0.1.5/weBuPload. type = "text/css"/> <script src = "$ {baseUrl} /ligerui2/jquery/jquery-1.9.0.min.js" type = "text/javascript"> </script> <%-memperkenalkan plugin unggah file-%> <script type = "javascript" src = "$ {baseUrl} /webUploader0.1.5/webUploader.min.js"> </script> <script type = "text/javascript"> $ (fungsi () {/* untuk pembuatan pengunggah ini, yang terbaik untuk ditunggu sampai elemen dom dibuat, itu, div ini adalah div yang berikut ini karena ada div yang diketahui, karena itu adalah kancing yang digunakan untuk kancing ini adalah kancing yang digunakan hingga dom itu dibuat, itu, itu, div ini adalah div yang berikut ini karena ada div yang diketahui, karena itu adalah kancing yang digunakan untuk kancing yang digunakan, sebaiknya, itu, itu, itu, ada div, karena itu, ada div, karena itu, ada div, karena itu, div. mudah diabaikan. Nama Domain File Upload shard diaktifkan, itu tidak akan membatasi jumlah unggahan pada saat yang sama, itu akan menyebabkan pecahan yang diterima oleh latar belakang tidak konsisten. Penerimaan dan kesalahan untuk direorganisasi. JPEG, itu akan mengompres dan mengunggahnya lagi sebelum mengunggah! // Logika spesifik sesuai dengan persyaratan proyek. }); fungsi (respons) {// logika spesifik ... console.log ('Unggah sukses .../n'); Math.Ceil (File.Size / (5 * 1024 * 1024)), nama file: file.name}, fungsi (data) {})); selesai, acara ini akan dipanggil terlepas dari keberhasilan atau kegagalan $ ("#btncancel"). Klik (function () {// Pemrosesan logistik ..}); id = "btncancel"> Batalkan unggahan </button> </div> </div> </body> </html>Tindakan Backend:
/** * Deskripsi: com.ims.action * Penulis: Eleven * Tanggal: 2017/12/26 10:50 */@Controller ("FileAction") FileAction kelas publik {/ * Parameter terkait untuk setiap file kecil yang digunakan untuk menerima permintaan segmentasi * // Ingat untuk memberikan metode unggahan yang sama // unggah file unggahan (nilai nilai nama yang sama = Formulir = Formulir = Metode Get yang sesuai // Unggah File Objec Obyek (Nilai nama yang sama dari Formulir = Formulir = Metode Get yang sesuai // Upoad File Object (The Same Nilai Nilai Nama Tipe = Formulir = Metode Get yang sesuai) // Nama File Private String unggahFileName; // Upload Type Private String UploadContentType; /** * Variabel berikut adalah publik, ada terlalu banyak parameter, jadi saya tidak ingin mengaturnya ke pribadi dan kemudian menulis metode Get and Set, * Cukup gunakan publik hanya dengan malas */// File sharding nomor string publik; Guid String Publik; // Gabungan dan Split keduanya digunakan untuk menerima dan mengirim permintaan gabungan nama file string publik; // Nama File Potongan String Publik; // Nomor Segmen // Saat mengunggah file dalam shard, metode ini akan dipanggil setiap kali file kecil diunggah, yang tidak berbeda dari file menyimpan file public void unggahan publicFile2 () Lempar Exception {string str = "d:/unggah44/divide/"; // File Saving Path // Simpan jalur setiap string file kecil realPath = str + guid + "/" + chunk; File tmp = file baru (realpath); Fileutils.copyfile (unggah, tmp); System.out.println ("File Unggah"+unggahFileName+", blok mana:"+chunk+", ukuran:"+(unggah.length ()/1024/1024)+"m"); } // File gabungan public void mergeFile () melempar pengecualian {string path = "d:/unggah44/gabungan/"; // buat folder gabungan file baru (path) .mkdir (); // buat file gabungan newfile = file baru (path + fileName); if (! newfile.exists ()) {newfile.createNewFile (); } FileOutputStream outputStream = FileOutputStream baru (newFile, true); // Tambahkan file apend ke byte [] byt = byte baru [10 * 1024 * 1024]; int len; FileInputStream Temp = null; // Shash File untuk (int i = 0; i <integer.parseint (chunks); i ++) {// "d:/unggah44/divide/" + guid + "/" + i untuk menyimpan jalur file kecil yang terbagi/divided/" +" + "II); while ((len = temp.read (byt))! = -1) {System.out.println (len); outputStream.write (byt, 0, len); } temp.close (); } // Ketika semua ditulis ditambahkan selesai, aliran dapat ditutup outputStream.close (); // Hapus shard file string path2 = "d:/unggah44/divide/" + guid; Fileutils.deletedirectory (file baru (path2)); // hapus semua konten di direktori system.out.println ("Success! Guid =" + GUID + "; chunks =" + chunks + "; fileName =" + nama file); } file publik getUpload () {return unggah; } public void setupload (unggah file) {this.upload = unggah; } public string getUploadFileName () {return unggahFileName; } public void setuploadFileName (String unggahfileName) {this.uploadFileName = unggahFileName; } public String getUploadContentType () {return unggahcontentType; } public void setuploadContentType (string unggahcontentType) {this.uploadContentType = unggahcontentType; }}Konfigurasi Struts.xml:
<action name = "unggahfile2" method = "unggahfile2"> </action> <action name = "mergeFile" method = "mergeFile"> </action>
OK, di sini, mengunggah breakpoint fragmentasi file sederhana selesai.
Ngomong-ngomong, latar belakang hanya menerima beberapa parameter sederhana, dan tentu saja ada lebih dari parameter di atas yang ditularkan dari webuploader front-end. Oleh karena itu, Anda dapat belajar menggunakan mode debugging F12 untuk melihat permintaan yang dikirim dan parameter permintaan terkait. Saya tidak akan membicarakannya di sini.
Menjalankan tangkapan layar:
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.