Heim > Artikel > Web-Frontend > Analyse von Beispielen für den asynchronen Datei-Upload in HTML
Analyse von Beispielen für den asynchronen Datei-Upload in HTML
- 高洛峰Original
- 2017-03-07 11:21:13961Durchsuche
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>
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>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:
<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: '/hehe',
type:"post",
data: {},
name: 'textfield',
onSubmit: function(file, ext) {
alert("上传成功");
},
onComplete: function(file, response) {
}
});
})();
</script>
</body>