Exemple de téléchargement de fichier asynchrone dans la production de pages html_HTML/Xhtml_Web

Copier le code

Le code est le suivant :

Copier le codeLe code est le suivant :

Il s'agit de la méthode de soumission de formulaire la plus courante et la plus simple en HTML, mais cette méthode doit changer de page. Peut-être que parfois nous voulons interagir avec le serveur sur la même page et ne voulons pas passer à une autre. un après avoir soumis le formulaire, que dois-je faire ? Voici plusieurs façons de soumettre des formulaires.
Introduisez d'abord une solution pour sauver le pays à travers des courbes. Les extraits de code ci-dessus n'ont pas besoin d'être modifiés. Ajoutez simplement le code suivant

Copier le codeLe code est le suivant :

et ajoutez l'attribut target sous la forme target=uploadFrame. L'attribut target doit être cohérent avec la valeur de l'identifiant dans l'iframe (ou la valeur de l'attribut name, vous le saurez). après l'avoir essayé).

Une brève explication, en fait, notre formulaire ici est rafraîchi après soumission, mais pourquoi ne passe-t-il pas à la page C'est à cause de cette iframe. En fait, nous l'avons rafraîchi dans l'iframe, et le. iframe est vide, c'est-à-dire que cela revient à ne pas rafraîchir, ce qui nous donne un sentiment d'asynchrone. Ce n'est pas une méthode orthodoxe, mais c'est aussi un moyen de sauver le pays. Bien sûr, cette méthode n'est pas applicable dans de nombreux cas. Par exemple, nous voulons soumettre un formulaire complété. Après avoir récupéré quelque chose sur le serveur, cette méthode ne fonctionnera évidemment pas. Ici, nous devons également soumettre le tableau de manière véritablement asynchrone.

(2) soumission de formulaire asynchrone jquery

Nous introduisons ici ajaxupload, un plug-in de soumission de formulaire pour jquery, et son utilisation est relativement simple

Copier le codeLe code est le suivant :

🎜>

🎜>( function(){
new AjaxUpload("#upload", {
action : '/hehe',
type : "post",
données : {},
nom : 'textfield ',
onSubmit: function(file, ext) {
alert("Téléchargement réussi");
},
onComplete: function(file, réponse) {
}
} );
})();




Le code principal est publié ici. terminé, nous utilisons simplement une fonction auto-exécutable pour ajouter un événement de téléchargement asynchrone au bouton avec l'identifiant de téléchargement. L'identifiant dans new AjaxUpload(id, object) correspond à l'identifiant de l'objet lié. data est des données supplémentaires. Le nom peut être arbitraire. La fonction onSubmit est la fonction de rappel avant de télécharger le fichier, et ext est le suffixe du fichier. par le serveur peuvent être traités. Ce qui précède sont les implémentations de deux clients de téléchargement de fichiers simples.