Analyse von Beispielen für den asynchronen Datei-Upload in HTML-HTML-Tutorial-php.cn

Analyse von Beispielen für den asynchronen Datei-Upload in HTML

高洛峰

Freigeben： 2017-03-07 11:21:13

Original

1009 Leute haben es durchsucht

Manchmal möchten wir auf derselben Seite mit dem Server interagieren, aber nach dem Absenden des Formulars nicht zu einer anderen Seite wechseln. Was können wir tun?

Code Wie folgt:

<form action="/hehe" method="post"> 
<input type="text" value="hehe"/> 
<input type="submit" value="upload" id="upload"/> 
</form>

Nach dem Login kopieren

Dies ist die häufigste 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 Ich möchte nach dem Absenden des Formulars nicht zu einer anderen Seite wechseln. Was soll ich tun?
Stellen Sie zunächst eine Lösung vor, um das Land durch Kurven zu retten. Fügen Sie einfach den folgenden Code hinzu:

<iframe id="uploadFrame" name="uploadFrame"></iframe>

Nach dem Login kopieren

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

Eine kurze Erklärung: Tatsächlich wird unser Formular hier nach dem Absenden 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. Die Verwendung ist relativ einfach lautet wie folgt:

Der Hauptcode wird hier veröffentlicht. Nachdem das Rendern der Seite abgeschlossen ist, verwenden wir eine selbstausführende Funktion, um der Schaltfläche mit der ID-Upload ein asynchrones Upload-Ereignis hinzuzufügen , new AjaxUpload(id , die id im Objekt) Was den zweiten Parameter betrifft, kann der Name der Callback-Funktion beliebig sein Der erste Parameter file ist der Dateiname, ext ist der Suffixname der Datei und die vom Server zurückgegebenen Daten können in der onComplete-Funktion verarbeitet werden. Oben sind die Implementierungen von zwei einfachen Datei-Upload-Clients.

Weitere verwandte Artikel zur Beispielanalyse des asynchronen Datei-Uploads in HTML finden Sie auf der chinesischen PHP-Website!

<body> 
<form action="/hehe" method="post"> 
<input type="text" value="hehe"/> 
<input type="button" value="upload" id="upload"/> 
<!--<input type="button" value="send" onclick="send()"/>--> 
</form> 
<script> 
(function(){ 
new AjaxUpload("#upload", { 
action: &#39;/hehe&#39;, 
type:"post", 
data: {}, 
name: &#39;textfield&#39;, 
onSubmit: function(file, ext) { 
alert("上传成功"); 
}, 
onComplete: function(file, response) { 
} 
}); 
})(); 
</script> 
</body>

Nach dem Login kopieren