Téléchargement de fichiers d'application HTML5

Pendant longtemps, les développeurs ont été en détresse. Certains sites Web utilisent l'attribut Activer = Multipart / Form-Data de la balise de formulaire, mais cet attribut nécessite que le serveur ait des paramètres spéciaux pour afficher la progression, et il est également compliqué. nous.

Voyons maintenant pourquoi HTML5 peut résoudre ce problème et comment il peut faire.

Dans la norme HTML5, l'objet XMLHttpRequest est redéfini, connu sous le nom de NIDE 2 XMLHTTPREQUEST, qui contient les 5 nouvelles fonctionnalités suivantes:

1. Prise en charge des octets de téléchargement et de téléchargement, tels que des fichiers, des blobs et des données de formulaire

2. Ajout de la progression du téléchargement et du téléchargement

3. Prise en charge des demandes croisées

4. Autoriser une demande anonyme (c'est-à-dire la partie de référence qui n'envoie pas HTTP)

5. Autoriser le délai de la demande

Dans ce tutoriel, nous faisons principalement attention aux première et deuxième fonctionnalités, en particulier le deuxième article - il peut fournir les progrès de téléchargement que nous voulons. Contrairement au plan précédent, cette solution n'exige pas que le serveur fasse des paramètres spéciaux, afin que tout le monde puisse l'essayer en regardant le tutoriel.

Le diagramme ci-dessus est le contenu que nous pouvons atteindre:

1. Afficher les informations de fichier téléchargées, telles que le nom du fichier, le type, la taille

2. Une barre de progression qui peut montrer de réels progrès

3. La vitesse du téléchargement

4. Estimation du reste du temps

5. La quantité de données qui ont été téléchargées

6. La réponse du serveur est retournée après le téléchargement terminé

De plus, avec XMLHTTPRequest, notre processus de téléchargement est asynchrone, donc lorsque l'utilisateur télécharge le fichier, il peut toujours faire fonctionner d'autres éléments de la page Web, et il n'est pas nécessaire d'attendre le téléchargement. Une fois le téléchargement terminé, nous pouvons récupérer la réponse du serveur, donc tout le processus de téléchargement est assez logique.

HTML5 ajoute un nouvel événement de progression, qui nous fournit les informations suivantes:

1. Taille totale du fichier

2. Chargement - Taille du téléchargement

3.

Il n'y a pas beaucoup d'informations, mais il suffit de calculer la progression du fichier. Bien sûr, il y a encore beaucoup de choses qu'il ne donne pas directement, ce qui est dommage.

Il n'est pas très différent du code de téléchargement de fichiers ordinaire. Cependant, notez que la balise d'entrée associe une fonction JavaScript sur onchange.

 <! Row> <étiquette pour = filetouplload> sélectionnez un fichier à télécharger </bable> <entrée type = file name = filetouplload id = filetouplload = fileselec ted (); /> </div> <div id = filename> </div> <div id = fileSize> </ div> <div id = fileType> </ div> <div class = row> <input type = button onClick = uploadFile () value = upload / >> << div

Une fois que nous utilisons l'entrée dans HTML, nous pouvons obtenir un objet FileList dans le code JS. Cet objet fait partie de l'API de fichier nouvellement ajouté dans HTML5.

1. Nom - Nom du fichier (n'inclut pas le chemin)

2. Type-Type de fichier (minuscules)

3. Taille-File Taille (l'unité est octet)

C'est exactement ce dont nous avons besoin. Bien sûr, HTML5 a également un objet FileReader, mais nous ne l'avons pas utilisé ici. Maintenant, grâce aux trois contenus ci-dessus, nous pouvons contrôler la taille et les types de fichiers téléchargés par l'utilisateur afin de réduire la pression pendant le serveur et d'améliorer le facteur de sécurité.

 Fonction Fileted () {Var File = Document.getElementById (FileToupLoad '). .Size * 100 / (1024 * 1024)) / 100) .tring () + 'MB'; else FileSize = (math.round (file.size * 100/1024) / 100) .tring () + '); Document.getElementById (FileName '). 'Type:' + file.type;}}

Alors, que se passera-t-il lorsque l'utilisateur choisit un bon fichier et cliquez sur Télécharger?

 Fonction uploadfile () {var xhr = new xmlhttprequest (); ; Envoyer (fd);} fonction uploadProgress (evt) {if (evt.Lengthcompotable) {var %Complete = math.round. ) + '%';} Else {document.gtelementById ('ProgressNumber') .InnerHtml = 'Impossible de calculer';}} fonction uploadComplete (EVT) {/ * Cet événement est soulevé lorsque le serveur renvoie une réponse * / alert (evt.target.ResponSext);

Dans la deuxième ligne de code, notre code JS utilise un autre nouvel objet -formData lancé par un autre HTML5. L'objet FormData est l'ensemble des données de formulaire de l'utilisateur. Nous soumettons des données au serveur en tournant cet objet.

Bien sûr, nous pouvons également construire cet objet manuellement dans le code, par exemple, comme les suivants:

 var fd = new FormData (); ]));

Retour au sujet. En regardant le code précédent, nous avons ajouté de nombreux événements de surveillance de XMLHTTPRequest. En particulier, il est important de noter que ce que nous lions n'est pas XMLHTTPRequest lui-même, mais ses attributs, tels que UploadProgress.

Enfin, jetez un œil au code complet.

 <! [0]; ) + 'MB'; else fileSize = (math.round (file.size * 100/1024) / 100) .tring () + 'kb'; .Name; FD.APPED (FileToupLoad, document.getElementyid (FileToupLoad). Files [0]); false); pour cent objet de mathématiques (ev.loaded * 100 / evt.total); Pour calculer '; s soulevé lorsque le serveur renvoie une réponse * / alert (evt.target .ResponSext);} fonction uploadFailed (evt) {alert (il y a eu une erreur qui a tenté de télécharger le fichier.); par l'utilisateur ou le navigateur a abandonné la connexion.);} </ script> </ head> <booody> <form id = form1 encType = multipart / form-data méthode = post-action = upload.php> <div class = row > <Label = FileToup Load> Sélectionnez un fichier à télécharger </ Label> <entrée Type = File Name = FileTouplload ID = FileTouplload OnChange = FileSelect (); /> </div> <div id = filename> </div> < div id = fi lesize> </div> <div id = filetype> </div> <div class = row> <input type = bouton onClick = uploadFile () value = upload /> </div m> </gody> </html>

Notre tâche est-elle terminée? On peut dire qu'il est complet, car ce code a été en mesure de terminer la tâche de téléchargement de fichiers, et il peut également afficher la progression du téléchargement; Nous avons beaucoup de choses qui n'ont pas été faites, comme le CSS, comme CSS embellit, etc. Mais ce n'est pas le thème de notre article.

Enfin, vous rappelez que le code du tutoriel doit être utilisé sur le navigateur qui prend en charge les nouvelles fonctionnalités.

Ce qui précède est tout le contenu de cet article.