1. Deskripsi alasan menggunakan plugin WebUploader
Saya ditipu oleh proyek yang saya lakukan sekarang.
Biarkan saya berbicara terlebih dahulu tentang Spring Arsitektur Proyek saya+Struts2+MyBatis+MySQL
Lalu apa. Disetujui bahwa itu akan cukup untuk mengunggah menurut 2G, jadi saya menggunakan plug-in Ajaxfileupload. Karena saya menggunakan ini untuk mengunggah gambar sebelumnya, saya menggunakannya secara langsung saat mengunggah lampiran.
Berbagai kode dan kode telah diuji. Tidak ada masalah dengan mengunggah file 2G. Caranya datang. Setelah proyek diluncurkan, pelanggan meminta untuk mengunggah file 4G, dan bahkan ada lebih dari 20g. . Nani, kamu tidak mengatakannya sebelumnya. . .
Di bawah IE11, gunakan plug-in Ajaxfileupload.js untuk mengunggah file yang melebihi 4G, dan IE secara langsung melempar pengecualian. Pesan dengan hasil aritmatika melebihi popup 32 bit.
Seperti yang ditunjukkan pada gambar di bawah ini:
Sebagai catatan tambahan, sistem saya adalah memori 64-bit, 8g, browser Google dan IE11 browser semuanya 32-bit. Merupakan masalah untuk mengunggah 8G menggunakan AjaxfileUpload di bawah Google. Tidak ada kesalahan yang akan dilaporkan.
IE11 memiliki lebih dari 4G dan salah melaporkan gambar di atas secara langsung. mustahil. Ubah plug-in.
2. Pemilihan plugin
1. Stream Upload Plugin. Stream adalah plug-in untuk memecahkan masalah mengunggah file oleh browser yang berbeda. Ini adalah kombinasi dari versi flash DEADLOADIFY dan HTML5. Alamat plugin http://www.twinkling.cn/
Fungsinya memang sangat kuat, tetapi gaya CSS tetap, yang sangat berbeda dari gaya batang kemajuan dari proyek saya saat ini. Menyerahkan plugin ini
2.WebUploader plugin. WebUploader adalah komponen unggahan file modern sederhana terutama HTML5 dan ditambah dengan flash yang dikembangkan oleh tim Baidu Webfe (FEX). Di browser modern, kita dapat memberikan permainan penuh untuk keuntungan HTML5, sementara tidak meninggalkan browser utama IE, dan terus menggunakan runtime flash asli, dan kompatibel dengan IE6+, iOS 6+, dan Android 4+. Metode panggilan yang sama dapat dipilih oleh pengguna sesuka hati.
Penggunaan fragmentasi file yang besar mengunggah secara bersamaan sangat meningkatkan efisiensi pengunggahan file. Alamat plugin http://fex.baidu.com/webuploader/
Plugin ini dapat menyesuaikan gaya CSS. Fungsinya juga sangat kuat, jadi saya dengan tegas mengadopsi plug-in ini.
3. WebUploader unggahan file tunggal
Saya menggunakan versi WebUploader 0.1.5. WebUploader terutama mengiris file besar pada klien, seperti mengirim permintaan untuk sharding setiap 5m, dan menerima file dari latar belakang untuk menggabungkan file. Ada dua cara untuk menggabungkan file. Yang pertama adalah meneruskan semua pecahan ke latar belakang dan kemudian menggabungkannya. Ini untuk memastikan bahwa urutan sharding benar, dan yang kedua adalah untuk bergabung saat sharding. Saya menggunakan yang kedua dalam proyek. Mengunggah file menggunakan pengunggah web membutuhkan tiga sumber daya: JS, CSS, dan SWF.
1.Tentroduce file JS
<type skrip = "Text/JavaScript" src = "../ main/js/webuploader.js"> </script> <script type = "text/javascript" src = "../ main/js/webuploader.min.js"> </script>
2. Perkenalkan gaya CSS
<tautan href = "../ main/css/webuploader.css" rel = "stylesheet" type = "text/css"/>
3. Perkenalkan SWF . SWF tidak merujuknya secara langsung. Tentukan saja jalur SWF ketika WebUploader diinisialisasi.
4.upload3.html
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "ja" lang = "ja"> <head> <meta http-equiv = "konten-tipe" content = "text/html; charset = utf-8" /> <meta http-equiv = "konten-skrip-tipe" content = "text/javascript"/> <meta http-equiv = "konten-tipe" konten = "text/css"/> <title> </title> <link href = "../ Main/css/css/stream-v1.css" c-link = "../ Main/css/stream-v1.css" c-link = ".. href = "../ main/css/webuploader.css" rel = "stylesheet" type = "text/css"/> <script type = "text/javascript" src = "../ Main/js/jQuery -.11.min.js"> </skrip> <script = "JAVER/JABERY-11.MIN.JS"> </SCRipt> <script = "TEKS/JAVER/JAVASI/JAVASI" src = "../ main/js/jQuery-2.1.4.min.js"> </script> <script type = "text/javascript" src = "../ main/js/jquery-ui.min.js"> </script> <script = "text/javascript" src = "../ main/js/bootstrap-DatePicker.min.js"> </script> <script type = "text/javaScript" src = "../ main/js/bootstrap-cepicker.min.js"> </script> <script = "Teks/JavaScript" src = "../ main/js/locales/bootstrap--picker.ja.min.js"> </script> <script type = "text/javascript" src = "../ main/js/webuploader.js"> </script> <script type = "teks/javascript" src = "../ main/js/webuploader.min.js"> </script> <script type = "text/javaScript" src = "../ js/konten/unggah. id = "lampirkan"> </div> <input type = "Tombol" value = "unggah" id = "unggah"/> </div> </div> <div id = "unggah1"> <! --- digunakan untuk menyimpan informasi file-> <div id = "thelist1"> </Div> <v> <Div ID = "MULTI"> </div> input "> </Div> <v> <Div ID =" MULTI "> </DIV> INPUID" "" NADEP = </DIV> <DIV ID = "MULTI"> </DIV> INPUIP1 "" </div> </div> </body> </html>
Gambarnya relatif sederhana, terlihat seperti ini
5. Upload3.js
Termasuk unggah file tunggal, unggahan multi-file, dan beberapa contoh webuploader
/**********************************************************/$ (function () {var $ list = $ ("#thelist"); var pengunggah; // name loader. Tidak berguna. // FileVal: Multifile ', // Kustomisasi atribut nama file. File tidak dapat diambil saat menggunakan file // disarankan agar penulis punya waktu untuk mengubah tempat ini, itu akan membunuh orang. Server: "ContentSdetail! AjaxattachUpload.action", duplikat: true, // adalah file yang sama mengubah ukuran: false, formdata: {"status": "file", "contentsdto.contentsid": "0000004730", "unggah": "000000004730" 000000430 " chunked: true, // simpan pemrosesan chunksize: 5 * 1024 * 1024, // 5m per irisan chunkretry: false, // jika gagal, jangan coba utas: 1, // unggah nomor bersamaan. Jumlah maksimum proses unggahan yang diizinkan pada saat yang sama. // runtimeorder: 'flash', // nonaktifkan fungsi drag global. Ini tidak akan muncul ketika gambar diseret ke halaman, buka gambar. DisableGlobaldnd: true}); // Saat file ditambahkan, unggah. ("Filequeued", function (file) {console.log ("filequeued:"); $ list.append ("<div id = '" + file.id + "' class = 'item'>" + "<h4 class = 'info'>" + file. +"</div>");}); // Ketika semua file diunggah, unggah. unggah.on ("unggahcepcept", function (objek, ret) {// server merespons //ret._raw mirip dengan datavar data = json.parse (ret._raw); if (data.resultCode! = "1" && data.resultCode! = "3") {if (data.Resululcode == "9") {unggah. uploader.on ("unggahSuccess", function (file) {$ ("#"+file.id) .find ("p.state"). text ("unggah");}); unggah. Kesalahan "); unggah. unggah akhir *************************************** filose = 0; // ukuran file var fileName = []; // Daftar nama file var filesizeOnone = []; // Setiap ukuran file var unggah; '../../main/js/uploader.swf', server: "ContentSdetail! MultiUpload.action", duplikat: true, // adalah file ukuran yang sama: false, formdata: {"Status": "Multi", "ContentsDto.ContentsId": "0000004730", "Uploadnum": "0000004730", "ada": 'false'}, compress: null, // gambar itu tidak dikompresi dikeluarkan: true, // shash chunkize: 5 * Gagal, jangan coba lagi utas: 1, // unggah nomor bersamaan. Jumlah maksimum proses unggahan yang diizinkan pada saat yang sama. // Filenumlimit: 50, // Verifikasi jumlah total file. Jika melebihi, itu tidak akan diizinkan untuk bergabung dengan antrian.// runtimeorder: 'flash', // nonaktifkan fungsi drag dan drop global. Dengan cara ini, ketika gambar diseret ke halaman, buka gambar. DisableGlobaldnd: true}); // Saat file ditambahkan, unggah. ("Filequeued", function (file) {console.log ("filequeued:"); $ list.append ("<div id = '" + file.id + "' class = 'item'>" + "<h4 class = 'info'>" + file. +"</div>");}); // Saat pengunggah dimulai, unggah. ("Startupload", function () {console.log ("startupload"); // Tambahkan parameter formulir tambahan $ .Extend (true, unggah.options.FormData, {"FileSize": FileSize, "MultifileName": FileName.join (","), "FilesizeOneByOne": FileSeoneByOne.join (",")}); unggah.on ("unggahcepcept", function (objek, ret) {// server merespons //ret._raw mirip dengan dataconsole.log ("unggahcepcept"); console.log (ret); var data = json.parse (ret._raw); if (data.resultCode! = "1" == "9") {waspada ("error"); unggah.reset (); return;}} else {unggah.reset (); alert ("error");}}) unggah. "UploadError", function (file, reason) {$ ("#"+file.id) .find ("p.state"). text ("unggah"); console.log (file); console.log (alasan); // beberapa file var filearray = unggahan.getFiles (); untuk (var i = 0 ; i <fileArray.length; i ++) {unggah .cancelfile (filearray [i]); unggah. unggah.on ("error", function () {console.log ("error"); unggah. $ ("#multi .webuploader-pick"). Klik (function () {unggah. function () {var fileArray1 = unggah. += fileArray1 [i] .Size; filesizeoneByone.push (fileArray1 [i] .Size); filename.push (fileArray1 [i] .name);} console.log (filessize); console.log (filsize); console.log (fileseSeoneByone); console unggah*/$ ("input [name = 'multiupload']"). on ("click", function () {unggah end************************************************//****************************************************** The parameters of the webuploader are submitted to the background.********************************************************** {//web uploader The built-in parameters lastModifiedDate=[Wed Apr 27 2016 16:45:01 GMT+0800 (China Standard Time)], chunks=[3], chunk=[0], type=[audio/wav], uid=[yangl], id=[WU_FILE_0], size=[268620636], name=[3.wav], //formData parameters ContentSDTO.ContentsId = [0000004730], eksistflg = [false], status = [file], uploadNum=[0000004730]}******************************************************************************************************************************************/6.ContentsDetail.action
//Single file upload background code public void ajaxAttachUpload() {String path = "d://test//"+fileFileName;try {File file = this.getFile();FileUtil.randomAccessFile(path, file);//If the file is small and 5M, the value of the shard parameter chunk is nullif (stringutils.isempty (chunk)) {outjson ("0", "success", "");} else {// chunk shard index, subskrip mulai dari 0 // potongan total shard count if (integer.valueof (chunk) == (integer.valueof (chunks) - 1) "");} else {outjson ("2", "mengunggah" + fileFileName + "chunk:" + chunk, "");}}} catch (Exception e) {outjson ("3", "Unggah gagal", "");}}Fileutil.java
/*** Tentukan lokasi untuk mulai menulis file* @param tempfile file input* @param outpath path ke file output (path + nama file)* @throws ioException*/public static void randomAccessFile (string outpath, file tempfile) nakonPREATCEPION {randomSception {randomSception {randum {nol {nol {nol nopReMile; noponSception {noperPath {noponEpSception {noperPath {noponEncception {noperPath {nopon- nopReMile; File baru (outpath); // buka file target di baca dan tulis rafile = randomAccessFile baru (dirfile, "rw"); rafile.seek (rafile.length ()); inputStream = new bufferedInputStream (FileInputStream baru (tempfile)); byte [] buf = byte baru [1024]; int panjang = 0; while ((length = inputstream.read (buf))! = -1) {rafile. IoException (e.getMessage ());} akhirnya {coba {if (inputStream! = Null) {inputStream.close ();} if (rafile! = Null) {rafile.close ();}} catch (pengecualian e) {throw ioException (e.geGMessage ()};} {{{{e.gigMessage (E.) {Exception E) {{execpleor {{exectron {exception {exception {exception {exception {{e.) 7. GAMBAR EFEK
Di atas adalah pengetahuan yang relevan dari metode mengunggah file besar, file tunggal dan beberapa file di Java yang diperkenalkan oleh editor. Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!