Cet article partage trois méthodes de téléchargement asynchrones Java pour votre référence. Le contenu spécifique est le suivant
La première méthode à télécharger à l'aide d'un plug-in de navigateur nécessite une certaine compétence de codage sous-jacente. Je n'en parlerai pas ici, afin de ne pas induire les enfants en erreur. Si vous mettez cela en considération, vous pouvez vous-même Baidu.
Le deuxième type utilise un iframe caché pour simuler des téléchargements asynchrones . Pourquoi parlons-nous de simulation ici? Parce que nous avons réellement mis le résultat de retour dans un iframe caché, nous n'avons donc pas fait sauter la page actuelle, qui ressemblait à une opération asynchrone.
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <tight> Fichier de téléchargement iframe caché </ title> <script = "text / javascrip ENCTYPE = "Multipart / Form-Data" Method = "Post" Target = "FRM" ONSUBMIT = "Loading (true);"> <p id = "upfile"> Pièce jointe: <Input Type = "File" Name = "MyFile" Style = "Affichage: Inline"> </ P> <P ID = "UPBTn"> <Entre Style = "Padding-Left: 50px; Type = "Soumide" value = "asynchroneous upload"> <span id = "uptxt" style = "display: non"> uploading ... </span> </p> </ form> <div id = "flist" style = "border: 1px darkgray;"> </ div> <script> // function de rappel uploadFinied (filename) {addToflist (filenName); chargement (false); } fonction addtoflist (fname) {var temp = ["<p id = '" + fname + "'>", fname, "<button onclick = 'delfile (/" "+ fname +" / ");'> delete </ button>", "</ p>"]; $ ("# flist"). append (temp.join (""));} Fonction Chargeing (showloading) {if (showloading) {$ ("# uptxt"). show (); } else {$ ("# uptxt"). hide; }} </ script> </ body> </html> Il y a deux points clés dans cette technologie:
1.Formée spécifiera la cible et le résultat soumis sera renvoyé à l'Iframe caché. (c'est-à-dire que la cible de formulaire est cohérente avec l'attribut de nom d'Iframe).
2. Une fois la soumission terminée, la page de l'IFRAME communique avec la page principale. Comment informer le résultat de téléchargement et les informations sur le fichier du serveur communiquent avec la page principale?
Après avoir reçu le fichier, nous utilisons NodeJS pour renvoyer une méthode définie par la fenêtre.parent. page principale. Après l'exécution, nous pouvons savoir que le téléchargement de fichiers est terminé. Le code est très simple:
Router.Post ('/ upload2', multipartMiddleware, fonction (req, res) {var fpath = req.files.myfile.path; var fname = fpath.substr (fpath.lastidexof ('//') + 1); settimeout (fund {var ret = [<Script> "," fenêtre. "');", "</ script>"]; Après l'exécution, vous pouvez ouvrir l'option Développeur et vous constaterez que certaines données renvoyées de l'IFRAME HIDDEN sont renvoyées.
Le troisième type utilise XMLHTTPRequest2 pour de vrais téléchargements asynchrones .
Ou publiez d'abord le code:
Après l'exécution, vous pouvez ouvrir l'option Développeur et vous constaterez que certaines données renvoyées de l'IFRAME HIDDEN sont renvoyées. Le troisième type utilise XMLHTTPRequest2 pour de vrais téléchargements asynchrones. Postons d'abord le code:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <tight> xhr niveau2 asynchronous upload </ title> <script type = "text / javascript" src = "jQuery Path ..."> </ script> </ad> <body> <v> <p id = "upfile"> privilégie: <port type = "id> <p id =" upfile "> Pièces final style = "affiche: inline"> </p> <p id = "upbtn"> <entrée style = "padding-left: 50px; padding-right: 50px;" Type = "Button" value = "asynchronous upload" onclick = "upload;"> <spann id = "uptxt" style = "display: non"> uploading ... </span> <span id = "upprog"> </span> <Button id = "stopbtn" style = "display: non;"> stop upload </ bouton> </p> </v> <v> <div id = "FLIST" FLIST " DarkGray; "> </div> <cript> Fonction Téléchargez {// 1. Préparez FormData var Fd = new FormData; fd.append ("myfile", $ ("# myfile") [0] .files [0]); // Créer un objet xhr var xhr = nouveau xmlHttpRequest; // Écoutez le statut et répondez en temps réel // xhr et xhr.upload ont des événements de progression, xhr.progress est le téléchargement Progress, xhr.upload.progress est le upload progress xhr.upload.onprogress = function (event) {if (event.lengthcompotable) {var% = math.round (event.Loaded * 100 / event.total); console.log («% d%», pourcentage); $ ("# upprog"). Texte (pourcentage); }}; // l'événement de démarrage de transmission xhr.onloadStart = function (event) {console.log ('Load Start'); $ ("# upprog"). text ('start upload'); $ ("# stopBtn"). One ('click', fonction {xhr.abort; $ (this) .hide ();}); chargement (true); }; // Le processus AJAX a réussi à terminer l'événement xhr.onload = function (event) {console.log ('Load Success'); $ ("# upprog"). text ('télécharger le succès'); console.log (xhr.ResponSeText); var ret = JSON.Parse (xhr.ResponSeText); addTofList (ret.fname); }; // Un événement d'erreur s'est produit dans le processus ajax xhr.onerror = fonction (événement) {console.log ('error'); $ ("# upprog"). text ('error s'est produit'); }; // ajax est annulé xhr.onabort = fonction (événement) {console.log ('abort'); $ ("# upprog"). Texte («l'opération a été annulée»); }; // La transmission Loadend se termine, et elle sera déclenchée quel que soit le succès ou l'échec xhr.onloadEnd = fonction (événement) {console.log ('Load end'); chargement (false); }; // initier une demande AJAX pour transmettre des données xhr.open («post», «upload3», true); Xhr.Send (FD); } fonction addtoflist (fname) {var temp = ["<p id = '" + fname + "'>", fname, "<button onclick = 'delfile (/" "+ fname +" / ");'> delete </ button>", "</ p>"]; $ ("# flist"). append (temp.join ("")); } fonction delfile (fname) {console.log ('pour supprimer le fichier:' + fname); // TODO: veuillez implémenter} Fonction Loading (showloading) {if (showloading) {$ ("# uptxt"). Show (); $ ("# stopBtn"). show (); } else {$ ("# uptxt"). hide (); $ ("# stopBtn"). hide (); }} </ script> </ body> </html> Il y a beaucoup de code, mais c'est facile à comprendre. Quiconque a utilisé AJAX sait que les objets XHR fournissent une méthode de rappel sur leclange OnreadyState pour écouter l'ensemble du processus de demande / réponse. Il y a plusieurs événements de progression supplémentaires dans la spécification de niveau 2 XMLHTTPREQUEST. Il y a 6 événements ci-dessous:
1.LoadStart: déclenché lorsque le premier octet des données de réponse est reçu.
2.Progressez: il est déclenché en continu lors de la réception de la réponse.
3. Error: déclenché lorsqu'une erreur se produit dans la demande.
4. Abort: déclenché lorsque la connexion est terminée en raison de l'appel de la méthode d'abandon.
5. Téléchargement: déclenché lorsque les données de réponse complètes sont reçues.
6. Téléchargement: déclenché une fois la communication terminée ou l'erreur, abandonner, les événements de chargement sont déclenchés.
Cette fois, nous pouvons interpréter le code: lorsque l'événement de transmission démarre, nous ajoutons un événement de clic sur le bouton STOP de transmission et la méthode d'abandon intégrée peut arrêter la transmission. Si vous ne cliquez pas, il sera téléchargé normalement jusqu'à la fin de la transmission. Son code d'arrière-plan est similaire à la deuxième méthode.
Les trois méthodes ont leurs propres avantages et inconvénients, faisons un résumé simple.
Les contrôles tiers ont une bonne interactivité et une bonne contrôlabilité, car ils sont proches de la couche inférieure et leurs performances sont également excellentes. Cependant, parce qu'il est difficile d'écrire, vous devez généralement installer vous-même des plug-ins, et parfois vous devrez peut-être les écrire vous-même.
Je pense personnellement que la méthode Iframe cachée est une méthode très réfléchie. Iframe peut nous aider à faire beaucoup de choses. Cette approche a une compatibilité approfondie du navigateur et ne nécessite pas d'installation de plugins. Cependant, il a une mauvaise interactivité, un processus de téléchargement incontrôlable et ses performances sont également très moyennes.
Pour le téléchargement Ajax pur de niveau XHR2, il doit avoir un navigateur avec une version supérieure (IE9 +). Mais il a une très bonne interactivité, vous pouvez voir la progression du téléchargement et est contrôlable.
Le développement peut être effectué différemment en fonction des exigences. Je pense personnellement que le téléchargement de ces fichiers, en particulier le second, fournit une sorte d'idée, qui utilise pleinement les caractéristiques de certaines balises HTML, peut être quelque chose que nos développeurs ont besoin pour réfléchir davantage.
Ce qui précède concerne cet article, j'espère qu'il sera utile à l'apprentissage de tout le monde.