1. Beschreibung der Gründe für die Verwendung des Webuploader -Plugins
Ich wurde durch das Projekt betrogen, das ich jetzt mache.
Lassen Sie mich zuerst über meine Projektarchitektur Spring+Struts2+MyBatis+MySQL sprechen
Dann was. Es wurde vereinbart, dass es ausreichen würde, nach 2G hochzuladen, also habe ich das AjaxFileUpload-Plug-In verwendet. Da ich dies verwendet habe, um Bilder vorher hochzuladen, habe ich es beim Hochladen des Anhangs direkt verwendet.
Es wurden verschiedene Codes und Codes getestet. Es gibt kein Problem beim Hochladen von 2G -Dateien. Der Trick kam. Nach dem Start des Projekts bat der Kunde, 4G -Dateien hochzuladen, und es gab noch mehr als 20 g. . Nani, du hast es nicht früher gesagt. . .
Verwenden Sie unter IE11 das Plug-In mit AjaxFileUpload.js, um Dateien hochzuladen, die 4G überschreiten, und dh direkt eine Ausnahme ausgelegt. Eine Nachricht mit arithmetischem Ergebnis von mehr als 32 Bit Popup.
Wie in der Abbildung unten gezeigt:
Als zusätzlicher Hinweis ist mein System 64-Bit-, 8G-Speicher, Google Browser und IE11 Browser 32-Bit. Es ist ein Problem, 8G mit AjaxFileUpload unter Google hochzuladen. Es werden keine Fehler gemeldet.
IE11 hat mehr als 4G und es ist falsch, das obige Bild direkt zu melden. auf keinen Fall. Ändern Sie das Plug-In.
2. Plugin -Auswahl
1. Stream -Upload -Plugin. Stream ist ein Plug-In, um das Problem des Hochladens von Dateien durch verschiedene Browser zu lösen. Es handelt sich um eine Kombination aus der Flash -Version von Uploadify und HTML5. Plugin -Adresse http://www.twinkling.cn/
Die Funktion ist in der Tat sehr leistungsfähig, aber der CSS -Stil ist festgelegt, was sich sehr vom Fortschrittsbalkenstil meines aktuellen Projekts unterscheidet. Gib dieses Plugin auf
2.WebuLader -Plugin. WebuPlader ist eine einfache moderne Datei -Upload -Komponente hauptsächlich HTML5 und ergänzt durch Flash, das vom Baidu Webfe (FEX) -Team (FEX) entwickelt wurde. In modernen Browsern können wir den Vorteilen von HTML5 volles Spiel geben, ohne die Mainstream -IE -Browser aufzugeben und weiterhin die ursprüngliche Flash -Laufzeit zu verwenden, und sind mit IE6+, iOS 6+ und Android 4+ kompatibel. Die gleiche Anrufmethode kann nach Belieben von Benutzern ausgewählt werden.
Die Verwendung einer großen Dateifragmentierung gleichzeitig das Hochladen verbessert erheblich die Effizienz des Datei -Hochladens. Plugin -Adresse http://fex.baidu.com/webuLader/
Dieses Plugin kann CSS -Stile anpassen. Die Funktionen sind auch sehr leistungsfähig, daher habe ich dieses Plug-In entschieden übernommen.
3.. WebuLader -Einzeldatei -Upload
Ich verwende WebuPlader Version 0.1.5. Der WebuPoader in Scheiben hauptsächlich in großen Dateien auf dem Client, z. B. das Senden von Anfragen zum Sharding alle 5 m und das Empfangen von Dateien vom Hintergrund zu verschmelzen Dateien. Es gibt zwei Möglichkeiten, Dateien zusammenzuführen. Das erste ist, alle Scherben an den Hintergrund zu übergeben und sie dann zusammenzuführen. Dies soll sicherstellen, dass die Sharding -Reihenfolge korrekt ist, und die zweite ist die Zusammenführung beim Sharding. Ich habe den zweiten im Projekt verwendet. Das Hochladen von Dateien mit dem Web -Uploader erfordert drei Ressourcen: JS, CSS und SWF.
1. Schalten Sie JS -Dateien ein
<script type = "text/javaScript" src = "../ main/js/webuLader.js"> </script> <script type = "text/javascript" src = "../ main/js/webuader.min.js"> </script>
2. Einführen Sie den CSS -Stil ein
<link href = "../ main/css/webuLader.css" rel = "stylesheet" type = "text/css"/>
3.. SWF einführen . SWF bezieht sich nicht direkt darauf. Geben Sie einfach den SWF -Pfad an, wenn der WebuLader initialisiert wird.
4.Upload3.html
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd"><Htmlmlml xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><meta http-equiv="Content-Language" content="ja" /> <meta http-äquiv = "content-script-type" content = "text/javaScript"/> <meta http-äquiv = "Content-Style-Typ" content = "text/css"/> <title> Demo </title> <link href = ". /> <link href = "../ main/css/webuLader.css" rel = "stylesheet" type = "text/css"/> <script type = "text/javascript" src = "../ main/js/jquery.11.1.min src = "../ main/js/jQuery-2.1.4.min.js"> </script> <script type = "text/javaScript" src = "../ main/js/jquery-ui.min.js"> </script> <script type = "text/javascript" " src = "../ main/js/bootstrap-datepicker.min.js"> </script> <script type = "text/javaScript" src = "../ main/js/bootstrap-datepicker.min.js" src = "../ main/js/locales/bootstrap-datepicker.ja.min.js"> </script> <script type = "text/javaScript" src = "../ main/js/webUlader.js"> </script> <script type = "text/javascript" src = "../ main/js/webuLader.min.js"> </script> <script type = "text/javaScript" src = "../ js/contents/upload3.js"> </scription> <body> <div id = "uploader"> <! id="attach"></div><input type="button" value="upload" id="upload"/> </div></div><div id="uploader1"><!--- Used to store file information--><div id="thelist1"></div><div><div id="multi"></div><input type="button" value="upload" id="multiUpload"/> </div> </div> </body> </html>
Das Bild ist relativ einfach, es sieht so aus
5.Upload3.js
Einschließlich Einzeldatei-Upload, Multi-File-Upload und mehreren Instanzen des Webuloaders
/************************************************************/$(function(){var $list = $("#thelist");var uploader ;// Instantiated uploader = WebUploader.create({ auto:false, // Whether to automatically upload pick: {id: '#attach',name:"file", // This place name It's Nutzlos. Obwohl ich den Debugger geöffnet habe, wurde der Name der Eingabe in der Tat nicht geändert. // Dateival: 'MultiFile', // das Namensattribut der Datei anpassen. Die Datei kann nicht abgerufen werden, wenn die Datei verwendet wird // Es wird empfohlen, dass der Autor Zeit hat, diesen Ort zu ändern. Sie tötet Menschen. Server: "ContentsDetail! Chunked: TRUE, // Shash -Verarbeitung ChunkSize: 5 * 1024 * 1024, // 5m pro Slice ChunkRetry: Falsch, // Wenn es fehlschlägt, probieren Sie keine Threads: 1, // Die gleichzeitige Anzahl der gleichzeitigen hochladen. Maximale Anzahl von Upload -Prozessen, die gleichzeitig zulässig sind. // RunTimeorder: 'Flash', // Deaktivieren Sie die globale Drag -Funktion. Dies wird nicht angezeigt, wenn das Bild in die Seite gezogen wird. Öffnen Sie das Bild. deaktivierenglobaldnd: true}); // Wenn eine Datei hinzugefügt wird, uploader.on ("FilequeUed", Funktion (Datei) {console.log ("FilequeEd:"); +"</div>");}); // Wenn alle Dateien hochgeladen werden, uploader.on ("UploadFineSted", function () {console.log ("UploadFineish:");}) // Wenn eine Datei in die Serverantwort hochgeladen wird, wird dieses Ereignis gesendet, um zu fragen, ob die Serverantwort gültig ist. Uploader.on ("UploadAccept", Funktion (Objekt, ret) {// Der Server antwortete //ret._raw ähnelt Datavar data = json.parse (ret._raw); if (data.resultcode! = "1" && data.resultcode! "9") {Uploader.Reset (); Alert ("Fehler"); return false;}} else {// e05017Uploader.reset (); Alert ("Fehler"); |}}) // frei, wenn die Datei -Upload erfolgreich ist. Uploader.on ("UploadSuccess", Funktion (Datei) {$ ("#"+file.id) .find ("p.State"). text ("hochgeladen");}); Uploader.on ("UploadError", Funktion (Datei) {$ ("#"+file) .Find ("P.State"). Fehler "); Uploader.CancelFile (Datei); Uploader.RemoveFile (Datei, true); Uploader.reset ();}); Upload End ************************************************************************************************************************ FileSize = 0; '../../main/js/uploader.swf', Server: "ContentsDetail! Multipload.Action", Duplicate: TRUE, // ist die gleiche Datei -Größe: Falsch, FormData: {"Status": "multi", "contentsdto.Contentsid": "0000004730", "Uploadnum": "0000004730", "existflg": 'false'}, compress: null, // Das Bild ist nicht komprimiert. Versucht nicht erneut Threads: 1, // Die gleichzeitige Anzahl hochladen. Die maximale Anzahl von Upload -Prozessen, die gleichzeitig zulässig sind. // FilenumLimit: 50, // Überprüfen Sie die Gesamtzahl der Dateien. Wenn es es überschreitet, darf es nicht der Warteschlange der Warteschlange beitragen. Auf diese Weise öffnen Sie das Bild, wenn das Bild in die Seite gezogen wird. deaktivierenglobaldnd: true}); // Wenn eine Datei hinzugefügt wird, uploader.on ("FilequeUed", Funktion (Datei) {console.log ("FilequeEd:"); +"</div>");}); // Wenn der Uploader gestartet wird, uploader.on ("startUpload", function () {console.log ("startUpload"); // Zusätzliche Formularparameter $ .extend hinzufügen (true, uploader.options.FormData, {"FileSize": FileSize, "MultifileName": Dateiname.join (","), "FileSeOnByone": FilesineByone.join (",")}); Uploader.on ("UploadAccept", Funktion (Objekt, ret) {// Der Server reagierte //ret._raw ist ähnlich wie DataConsole.log ("UploadAccept"); console.log (ret); var data = json.parse (ret._raw); if (data.resultcode! == "9") {alert ("error"); Uploader.Reset (); return;}} else {Uploader.Reset (); alert ("error");}}) uploader.on ("UploadSuccess", Funktion (Datei) {$ ("#"+Datei.ID. . = 0; i <filearray.length; i ++) {Uploader.CancelFile (filearray [i]); Uploader.RemoveFile (Filearray [i], true);} uploader.reset (); FileSize = 0; Filename = []; FileSeByone = []}); Uploader.on ("Fehler", function () {console.log ("Fehler"); Uploader.reset (); FileSize = 0; FileName = []; FileSizebyone = []; alert ("Fehler");}) // Wenn es die Upload -Schaltfläche in der Modal -Schaltfläche ist, wird das Problem. $ ("#multi .webUploader-pick"). click (function () {uploader.reset (); FileSize = 0; Dateiname = []; FileSizebyone = []; $ ("#multi: file"). click (); // Schlüsselcode}). function () {var filearray1 = uploader.getFiles (); für (var i = 0; i <filearray1.length; i ++) {// Dateigröße verwenden += filearray1 [i] .Size; ideSizeByone.push (filearray1 [i] .Size); Dateiname.push (filearray1 [i] .Name);} console.log (Dateisizesize); console.log (FileSize); console.log (FileSoneByone); console Upload*/$ ("input [name = 'multipload']"). on ("click", function () {Uploader.Upload ();})});/**************************************************************************************************************************** Ende* lastModifiedDate = [Mi 27. April 2016 16:45:01 GMT+0800 (China Standard -Zeit)], Chunks = [3], Chunk = [0], Typ = [Audio/Wav], UID = [yangl], id = [Wu_file_0], Größe = [268620636], Name = [3.Wav], // Formdata Parameters, // Formdata Parameters, // Formdata -Parameters, // Formdata -Parameters, // Formdata -Parameters. contentsdto.Contentsid = [0000004730], existflg = [false], status = [Datei], Uploadnum = [0000004730]} ***********************************************************6.ContentsDetail.Action
// einzelne Datei Hintergrundcode öffentlicher void ajaxattachUpload () {String path = "d: // test //"+filefileName; try {file file = this.getFile (); FileUtil.randomaccessfile (Pfad, Datei); // Wenn die Datei klein ist und 5m, der Wert des Shard -Parameters ist, ist der Parameter -Chunk -Chunk -Chunk -Chunk -Chunk -Chunk -Chunk -Chunk -Chunk -Chunk ist. nullif (Stringutils.isempty (Chunk)) {outjson ("0", "Erfolg", ");} else {// Chunk Shard -Index beginnt mit 0 // Stücken totaler Shard -Graf, wenn (integer.valueof (chunk) == (intiere.valueof (chunkeding) {{utjson (uplowhydydelyding) {{uth“, uplowithy uploding uplowhyding uplowithyding uplowithing uplowhyding uth. "");} else {outjson ("2", "hochladen" + fileFileName + "Chunk:" + Chunk, "");}}} catch (Ausnahme E) {outjson ("3", "Upload fehlgeschlagen", ");}}}}}}}}}FileUtil.java
/*** Geben Sie den Speicherort an, um die Datei zu schreiben Datei (outPath); // Öffnen Sie die Zieldatei in Read and Write Rafile = new randomAccessfile (Dirfile, "rw"); Rafile.seek (Rafile.length ()); InputStream = new BuferedInputStream (neuer FileInputStream (tempFile); IoException (e.getMessage ());} endlich {try {if (inputStream! = Null) {inputStream.close ();} if (rafile! 7. Effekt Bild
Das obige ist die relevante Kenntnis der Methode zum Hochladen großer Dateien, einzelnen Dateien und mehreren Dateien in Java, die vom Editor eingeführt wurden. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!