Dieser Artikel hat drei asynchrone Upload -Methoden von Java für Ihre Referenz. Der spezifische Inhalt ist wie folgt
Die erste Methode zum Hochladen mit einem Browser-Plug-In erfordert eine bestimmte zugrunde liegende Codierungsfähigkeiten. Ich werde hier nicht darüber sprechen, um die Kinder der Menschen nicht irrezuführen. Wenn Sie dies berücksichtigen, können Sie selbst Baidu.
Der zweite Typ verwendet ein verstecktes Iframe, um asynchrone Uploads zu simulieren . Warum sprechen wir hier über Simulation? Weil wir die Rückgabe tatsächlich zu einem versteckten Iframe einsetzen, haben wir den aktuellen Seitensprung nicht gemacht, der sich wie eine asynchrone Operation anfühlte.
<! DocType html> <html> <head> <meta charset = "utf-8"> <title> HIDDEN IFRame Upload-Datei </title> <script type = "text/javaScript" src = "jquery Path ..."> </script> </head> </iframe name = "frm" enctype="multipart/form-data" method="post" target="frm" onsubmit="loading(true);"> <p id="upfile">Attachment: <input type="file" name="myfile" style="display: inline"> </p> <p id="upbtn"> <input style="padding-left:50px;padding-right: 50px;" 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); Laden (falsch); } function addtoflist (fname) {var temp = ["<p id = '" + fname + "'>", fname, "<button onclick = 'Delfile (/" " + fname +"/");'> Löschen </button>", "</p>"]; $ ("#flist"). append (temp.join (""));} Funktion laden (showing) {if (showing) {$ ("#uptxt"). show (); } else {$ ("#uptxt"). Hide; }} </script> </body> </html> In dieser Technologie gibt es zwei wichtige Punkte:
1.Form wird das Ziel angeben, und das eingereichte Ergebnis wird an den versteckten Iframe zurückgegeben. (d. H. Das Formularziel steht im Einklang mit dem Namen des Iframe -Namens).
2. Nach Abschluss der Einreichung kommuniziert die Seite im Iframe mit der Hauptseite. So benachrichtigen Sie die Informationen zum Hochladen von Ergebnis- und Serverdateien mit der Hauptseite?
Nach dem Empfangen der Datei verwenden wir NodeJs, um eine vom Fenster definierte Methode zurückzugeben. Hauptseite. Nach der Ausführung können wir wissen, dass das Datei -Upload abgeschlossen ist. Der Code ist sehr einfach:
Router.post ('/upload2', MultiPartMiddleware, Funktion (req, res) {var fpath = req.files.myFile.Path; var fname = fpath.substr (fpath.lastIndexof ('//') + 1); "');", "</script>"]; Nach der Ausführung können Sie die Entwickleroption öffnen und feststellen, dass einige Daten, die aus dem versteckten Iframe zurückgegeben wurden, zurückgegeben werden.
Der dritte Typ verwendet XMLHTTPrequest2 für echte asynchrone Uploads .
Oder posten Sie zuerst den Code:
Nach der Ausführung können Sie die Entwickleroption öffnen und feststellen, dass einige Daten, die aus dem versteckten Iframe zurückgegeben wurden, zurückgegeben werden. Der dritte Typ verwendet XMLHTTPrequest2 für echte asynchrone Uploads. Lassen Sie uns zuerst den Code veröffentlichen:
<!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"> <Eingabe style = "padding-links: 50px; padding-right: 50px;" Typ = "Button" value = "Asynchronous Upload" Onclick = "Upload;"> <span id = "upptxt" style = "display: None"> Uploading ... </span> <span id = "upprog"> </span> <button id = "stopbtn" style = "display: keine; darkgray; "> </div> <script> Funktion hochladen {// 1. fd.append ("myfile", $ ("#myfile") [0] .files [0]); // XHR -Objekt erstellen var xhr = new xmlhttprequest; // Hören Sie sich den Status an und antworten Sie in Echtzeit // xhr und xhr.Upload haben Fortschrittsereignisse, xhr.Progress ist der Download -Fortschritt. console.log ('%d%', Prozent); $ ("#Upprog"). Text (Prozent); }}; // Transmission Start -Ereignis xhr.onloadStart = Funktion (Ereignis) {console.log ('ladenstart'); $ ("#upprog"). Text ('Upload'); $ ("#stopBtn"). Eins ('Click', Funktion {xhr.abort; $ (this) .hide ();}); Laden (wahr); }; // Der AJAX -Prozess hat das Ereignis xhr.onload = function (Ereignis) {console.log ('Lasterfolg') erfolgreich abgeschlossen; $ ("#upprog"). Text ('Erfolg hochladen'); console.log (xhr.responsetext); var ret = json.Parse (xhr.responsetext); addtoflist (ret.fname); }; // Ein Fehlerereignis in AJAX -Prozess xhr.onError = function (Ereignis) {console.log ('error'); $ ("#Upprog"). Text ('Fehler aufgetreten'); }; // ajax wird abgebrochen xhr.onabort = function (Ereignis) {console.log ('abort'); $ ("#Upprog"). Text ('Operation wurde abgebrochen'); }; // Die Loadend -Übertragung endet und wird unabhängig von Erfolg oder Misserfolg ausgelöst. Laden (falsch); }; // eine AJAX -Anfrage zur Übertragung von Data xhr.open ('post', '/upload3', true) einleiten; xhr.send (fd); } function addtoflist (fname) {var temp = ["<p id = '" + fname + "'>", fname, "<button onclick = 'Delfile (/" " + fname +"/");'> Löschen </button>", "</p>"]; $ ("#flist"). append (temp.join ("")); } function Delfile (fname) {console.log ('zu löschen Datei:' + fname); // toDo: Bitte implementieren Sie} Funktionen laden (showing) {if (showing) {$ ("#uptxt"). Show (); $ ("#STOPBTN"). Show (); } else {$ ("#uptxt"). hide (); $ ("#stopBtn"). hide (); }} </script> </body> </html> Es gibt viel Code, aber es ist leicht zu verstehen. Jeder, der AJAX verwendet hat, weiß, dass XHR -Objekte eine OnreadyStatechange -Callback -Methode zur Verfügung stellen, um den gesamten Anforderungs-/Antwortprozess zu hören. Es gibt mehrere weitere Fortschrittsereignisse in der XMLHTTPrequest Level 2 -Spezifikation. Es gibt 6 Ereignisse unten:
1.LoadStart: Ausgelöst, wenn das erste Byte der Antwortdaten empfangen wird.
2.PROGRESSE: Es wird während des Empfangs der Antwort kontinuierlich ausgelöst.
3.Error: Ausgelöst, wenn in der Anforderung ein Fehler auftritt.
4.ABORT: Ausgelöst, wenn die Verbindung beendet wird, weil die Abruftmethode aufgerufen wird.
5.LOAD: Ausgelöst, wenn vollständige Antwortdaten empfangen werden.
6.LOADEND: Ausgelöst nach Abschluss der Kommunikation oder der Fehler, Abbruch, Ladeereignisse werden ausgelöst.
Dieses Mal können wir den Code interpretieren: Wenn das Übertragungsereignis beginnt, fügen wir ein Klickereignis auf der Schaltfläche "Stop-Getriebe" hinzu, und die integrierte Ab-Abr-Methode kann die Übertragung stoppen. Wenn Sie nicht klicken, wird es normal hochgeladen, bis das Getriebe abgeschlossen ist. Sein Hintergrundcode ähnelt der zweiten Methode.
Die drei Methoden haben ihre eigenen Vor- und Nachteile, machen wir eine einfache Zusammenfassung.
Kontrollen von Drittanbietern haben eine gute Interaktivität und Kontrollierbarkeit, da sie nahe an der unteren Schicht liegen und ihre Leistung auch hervorragend ist. Da es jedoch schwierig zu schreiben ist, müssen Sie normalerweise selbst Plug-Ins installieren, und manchmal müssen Sie sie möglicherweise selbst schreiben.
Ich persönlich denke, dass die versteckte Iframe -Methode eine sehr nachdenkliche Methode ist. Iframe kann uns helfen, viele Dinge zu tun. Dieser Ansatz hat eine umfangreiche Browserkompatibilität und erfordert keine Plugins, die installiert werden müssen. Es hat jedoch eine schlechte Interaktivität, einen unkontrollierbaren Upload -Prozess und seine Leistung ist ebenfalls sehr durchschnittlich.
Für den XHR2 -Level Pure AJAX -Upload muss es einen Browser mit einer höheren Version (IE9+) haben. Aber es hat eine sehr gute Interaktivität, Sie können den Upload -Fortschritt sehen und sind kontrollierbar.
Die Entwicklung kann je nach Anforderungen unterschiedlich durchgeführt werden. Ich persönlich denke, dass das Hochladen dieser Dateien, insbesondere der zweiten, eine Art Idee liefert, die die Eigenschaften bestimmter HTML -Tags vollständig nutzt und unsere Entwickler möglicherweise mehr denken müssen.
Das Obige dreht sich alles um diesen Artikel, ich hoffe, es wird für das Lernen aller hilfreich sein.