✅ HTML5 - Télécharger des fichiers

Table des matières

Lorsque nous avons des formulaires de collecte de données sur une seule page HTML5 En plus de pouvoir prendre des données avec des champs de type de saisie, nous pouvons également télécharger des fichiers, ce qui nous permet d'accélérer le chargement de certaines données impossibles à exprimer en texte ou qui peuvent être des textes très longs, il est d'usage de télécharger une image fichiers ou fichiers pdf , car ces deux formats sont très populaires, cependant avec Ajax nous pouvons télécharger presque n'importe quel type de fichier.
Télécharger des fichiers
À télécharger des fichiers en utilisant Ajax, nous devons créer un champ de type fichier dans un formulaire et dans notre routine Ajax utiliser un objet Données de formulaire avec lequel nous collecterons les données pour pouvoir leur donner le format nécessaire et télécharger notre fichier sur le serveur.
L'object Données de formulaire il doit être utilisé avec précaution car il peut encore exister des versions de navigateurs qui ne le prennent pas entièrement en charge, cependant c'est une solution assez solide.
Voyons dans le code suivant comment effectuer un téléchargement de fichier de base :

 ExempleBananes:Pommes:Cerises:Fichier:Total:0 articlesSoumettre le formulaire

Lors de l'incorporation de l'entrée de type de fichier, l'objet Données de formulaire prend automatiquement les dispositions pour que notre fichier puisse être téléchargé sur le serveur, dans l'image suivante, nous pouvons voir comment le navigateur interprète cela :

Dans ce cas, c'était une image assez légère donc le temps de téléchargement du fichier sur le serveur n'est pas perceptible, cependant s'il s'agissait d'un pdf de 30 Mo, le temps serait beaucoup plus long, car c'est transparent pour l'utilisateur, il pourrait penser que la page n'est pas "faire n'importe quoi" ou c'était "penser" pour éviter cela, nous pouvons incorporer une barre de progression avec laquelle la progression devient visible.
Pour voir la progression de la montée nous allons utiliser l'objet XMLHttpRequête pour vérifier le statut de la demande Ajax:

 ExempleBananes:Pommes:Cerises:Fichier:Le progrès:Total:0 articlesSoumettre le formulaire

Nous avons défini un élément le progrès et avec lui Objet XMLHttpRequest Nous pouvons attribuer les valeurs pendant que le téléchargement progresse, dans le navigateur, nous pouvons le voir comme suit :

AGRANDIR

On peut utiliser Ajax Bien plus que consulter des éléments sur d'autres pages, nous pouvons également l'utiliser pour améliorer nos formulaires lorsqu'il s'agit de capturer des données.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif