Beispiel für einen asynchronen Datei-Upload bei der Produktion von html_HTML/Xhtml_Webseiten

Code kopieren

Der Code lautet wie folgt:

Code kopierenDer Code lautet wie folgt:

Dies ist die gebräuchlichste und einfachste Formularübermittlungsmethode in HTML, aber diese Methode muss die Seiten wechseln. Vielleicht möchten wir manchmal mit dem Server auf derselben Seite interagieren und nicht zu einer anderen wechseln Was soll ich nach dem Absenden des Formulars tun? Hier gibt es mehrere Möglichkeiten, Formulare einzusenden.
Stellen Sie zunächst eine Lösung vor, um das Land durch Kurven zu retten. Die obigen Codefragmente müssen einfach nicht geändert werden.

Code kopierenDer Code lautet wie folgt:

und fügen Sie das Zielattribut in der Form target=uploadFrame hinzu. Das Zielattribut muss mit dem Wert der ID im Iframe (oder dem Wert des Namensattributs, wie Sie wissen) übereinstimmen nachdem ich es ausprobiert habe).

Eine kurze Erklärung: Tatsächlich wird unser Formular nach der Übermittlung aktualisiert, aber warum springt es nicht zur Seite? Tatsächlich haben wir es im Iframe aktualisiert iframe ist leer, also nicht erfrischend, was uns ein asynchrones Gefühl vermittelt. Dies ist keine orthodoxe Methode, aber es ist auch eine Möglichkeit, das Land zu retten. Natürlich ist diese Methode in vielen Fällen nicht anwendbar. Wenn wir beispielsweise ein ausgefülltes Formular senden möchten, nachdem wir etwas vom Server abgerufen haben, funktioniert diese Methode natürlich nicht. Auch hier müssen wir die Tabelle wirklich asynchron senden.

(2) asynchrone Formularübermittlung mit JQuery

Hier stellen wir Ajaxupload vor, ein Formularübermittlungs-Plug-In für JQuery, dessen Verwendung relativ einfach ist

Code kopierenDer Code lautet wie folgt:

🎜>< ;!---->

🎜>( function(){
new AjaxUpload("#upload", {
action: '/hehe',
type: "post",
data: {},
name : 'textfield',
onSubmit: function(file, ext) {
alert("Upload erfolgreich");
onComplete: function(file, Response) {
}
} );
})();



Der Hauptcode wird hier veröffentlicht abgeschlossen, wir verwenden einfach eine selbstausführende Funktion, um der Schaltfläche ein asynchrones Upload-Ereignis mit der ID des Uploads hinzuzufügen. Die ID in new AjaxUpload(id, object) entspricht der ID des gebundenen Objekts. Bei den Daten handelt es sich um zusätzliche Daten. Die Funktion onSubmit ist die Rückruffunktion vor dem Hochladen der Datei, und ext ist das Suffix der Datei vom Server verarbeitet werden können. Oben sind die Implementierungen von zwei einfachen Datei-Upload-Clients.