File Html5 File, Drop, Analyze, Lire et Téléchargez

Ce fut une semaine chargée. Nous avons découvert comment les nouvelles API HTML5 peuvent nous aider à ouvrir, lire et télécharger des fichiers que l'utilisateur a glissé et déposés dans la fenêtre du navigateur. Cet article résume les techniques et le niveau actuel du support du navigateur.

Les plats clés

Les API
• HTML5 peuvent aider à ouvrir, lire et télécharger des fichiers qu'un utilisateur a glissés et déposés dans la fenêtre du navigateur. Cette fonctionnalité est prise en charge par les dernières versions de Chrome, Firefox et Opera, mais Opera ne peut l'utiliser que via une entrée de fichier standard.
• L'objet FileList HTML5 est une collection de types d'objets de fichier, et l'objet FileReader vous permet d'ouvrir du texte ou des fichiers binaires en JavaScript. Cela permet de vérifier un type de fichier et une taille avant que d'autres traitements ou téléchargements ne se produisent.
• html5 permet la création de barres de progression de téléchargement en attachant un événement «Progress» aux objets XMLHTTPRequest2. Cette fonctionnalité, combinée à la possibilité de faire glisser et de déposer des fichiers, peut améliorer considérablement la convivialité des applications Web.

support de l'API HTML5

Votre code JavaScript doit vérifier l'existence des objets de fichier, FileList et FileReader avant de joindre des gestionnaires d'événements. Au moment de la rédaction du moment de la rédaction, ceux-ci sont soutenus par les dernières versions de Chrome, Firefox et Opera:

if (window.File && window.FileList && window.FileReader) { ... }

Bien que l'opéra prenne en charge ces objets, ils ne peuvent être utilisés que via une entrée de fichier standard - pas glisser-déposer. Par conséquent, un autre chèque est requis; Je suggère d'utiliser la méthode de téléchargement XMLHTTPREQUEST2, par ex.

var xhr = new XMLHttpRequest();
if (xhr.upload) {
	... attach drag and drop events ...
}

Fichier glisser et déposer

Tous les navigateurs (à l'exception de ceux de l'iPhone et de l'iPad) prennent en charge le type d'entrée de fichier qui affiche le bouton «Browse» familier. Un attribut «multiple» a été introduit dans HTML5 et nous pouvons attacher un gestionnaire d'événements de changement au champ:

document.getElementById("fileselect").addEventListener("change", FileSelectHandler, false);

Chrome et Firefox permettent également aux utilisateurs de faire glisser un ou plusieurs fichiers sur un élément choisi. Vous pouvez joindre des gestionnaires d'événements, notamment «Dragover» et «Dragleave» (pour changer les styles) et «Drop» pour détecter les fichiers abandonnés, par ex.

document.getElementById("filedrag").addEventListener("drop", FileSelectHandler, false);

récupérer un objet fileliste

L'objet FileList HTML5 est une collection de type tableau d'objets de fichier. Les champs d'entrée de fichier renvoient une propriété FileList via une propriété de fichiers (event.target.files). Les fichiers abandonnés renvoient un objet FileList via la propriété Datatransfer.Files de l'événement (event.datatransfer.files). Nous pouvons donc récupérer un objet FileList en utilisant un gestionnaire d'événements unique:

// cancel event default
e.preventDefault();

// fetch FileList object
var files = e.target.files || e.dataTransfer.files;

// process all File objects
for (var i = 0, file; file = files[i]; i++) {
	...
}

Il est important d'annuler l'événement par défaut. Cela empêche le navigateur qui tente d'afficher ou de gérer un fichier lorsqu'il est tombé dans la fenêtre.

Analyser des objets de fichier

Les collections FileList contiennent un certain nombre d'objets de fichier. Trois propriétés de fichiers utiles sont fournies:

1. .name: le nom du fichier (il n'inclut pas les informations de chemin)
2. .Type: le type mime, par ex. image / jpeg, texte / plaine, etc.
3. .Size: la taille du fichier en octets.

Il est possible de vérifier un type de fichier et une taille avant que d'autres traitements ou téléchargements ne se produisent, par exemple

if (window.File && window.FileList && window.FileReader) { ... }

Pour plus d'informations, reportez-vous à l'ouverture des fichiers supprimés à l'aide de HTML5 et JavaScript.

Fichiers d'ouverture à l'aide de FileReader

L'objet HTML5 FileReader vous permet d'ouvrir du texte ou des fichiers binaires en JavaScript. Comme vous vous en doutez, la méthode readastext () est utilisée pour récupérer le contenu du texte, par exemple

var xhr = new XMLHttpRequest();
if (xhr.upload) {
	... attach drag and drop events ...
}

De même, la méthode readasdataurl () récupère les données d'image binaires en tant qu'URL de données codées qui peuvent être transmises à un élément d'attribut SRC ou de canevas d'image:

document.getElementById("fileselect").addEventListener("change", FileSelectHandler, false);

Pour plus d'informations, reportez-vous à l'ouverture des fichiers supprimés à l'aide de HTML5 et JavaScript.

téléchargement de fichiers à l'aide d'Ajax

Les fichiers appropriés peuvent être téléchargés sur votre serveur pendant que l'utilisateur reste sur la page. Il s'agit simplement de passer un objet de fichier à la méthode Send () de XMLHTTPREQUEST2:

document.getElementById("filedrag").addEventListener("drop", FileSelectHandler, false);

Remarque Nous avons également envoyé le nom de fichier en tant qu'en-tête HTTP. Ceci est facultatif, mais il nous permet de recréer le fichier en utilisant son nom d'origine sur le serveur à l'aide d'une langue telle que PHP:

// cancel event default
e.preventDefault();

// fetch FileList object
var files = e.target.files || e.dataTransfer.files;

// process all File objects
for (var i = 0, file; file = files[i]; i++) {
	...
}

Pour plus d'informations, reportez-vous à la façon de télécharger de manière asynchrone des fichiers à l'aide de HTML5 et AJAX.

Création de barres de progression de téléchargement

Nous pouvons également attacher un événement «Progress» aux objets XMLHTTPREQUEST2:

// process image files under 300,000 bytes
if (file.type.indexOf("image") == 0 && file.size < 300000) {
	...
}

Le gestionnaire reçoit un objet d'événement avec. Télélé (le nombre d'octets transférés) et .Total (la taille du fichier). Par conséquent, la progression peut être calculée et transmise à une balise de progression HTML5 ou à tout autre élément, par ex.

if (file.type.indexOf("text") == 0) {
    var reader = new FileReader();
    reader.onload = function(e) {
		// get file content
		var text = e.target.result;
		...
    }
    reader.readAsText(file);
}

Pour plus d'informations, reportez-vous à la création de barres de progression de téléchargement de fichiers graphiques dans HTML5 et JavaScript. J'espère que vous avez apprécié cette série. Le glisser-déposer de fichiers est une fonctionnalité importante qui peut transformer l'utilisabilité de l'application Web. HTML5 facilite enfin la tâche.

Questions fréquemment posées (FAQ) sur le fichier html5 glisser, déposer, lire, analyser et télécharger des barres de progression

Comment puis-je implémenter la fonction de glisser-déposer HTML5 dans mon application Web?

L'implémentation de la fonction de glisser-déposer HTML5 implique quelques étapes. Tout d'abord, vous devez créer une zone de dépôt, qui est un domaine où les utilisateurs peuvent supprimer leurs fichiers. Cela peut être n'importe quel élément HTML, mais il doit avoir l'attribut «draggable» défini sur true. Ensuite, vous devez ajouter des auditeurs d'événements pour les événements «Dragover» et «Drop». L’événement «Dragover» est tiré lorsqu'un élément traîné se situe au-dessus de la zone de dépôt, et l'événement «Drop» est tiré lorsque l'élément est abandonné. Dans le gestionnaire d'événements de l'événement «Drop», vous pouvez accéder aux fichiers supprimés via la propriété «datatransfer.files» de l'objet de l'événement.

Quelle est la différence entre «datatransfer.files» et «datatransfer.items»?

À la fois «datatransfer.files» et «datatransfer.items» sont des propriétés de l'objet «DataTransfer», qui est associé aux événements de glisser-déposer. La propriété «datatransfer.files» est un objet FileList représentant les fichiers glissés. Ceci est utile lorsque vous souhaitez gérer les fichiers supprimés du côté serveur. D'un autre côté, «Datatransfer.items» est un objet DataTransFeritemList représentant toutes les données de glisser. Ceci est utile lorsque vous souhaitez gérer différents types de données de glisser, pas seulement les fichiers.

Pourquoi mon "Datatransfer.files" est-il vide lorsque l'événement "Drop" est licencié?

Si votre "Datatransfer.Files" est vide lorsque l'événement "Drop est tiré, cela pourrait être parce que vous essayez d'y accéder dans l'événement" Dragover ". La propriété «Datatransfer.Files» n'est pas remplie dans l'événement «Drop». Assurez-vous que vous y accédez dans le bon gestionnaire d'événements.

Comment puis-je lire le contenu des fichiers supprimés?

Vous pouvez lire le contenu des fichiers supprimés à l'aide de l'API FileReader. Tout d'abord, vous devez créer un nouvel objet FileReader. Ensuite, vous pouvez utiliser la méthode «readastext» ou «readasdataurl» pour lire le contenu du fichier. La méthode «Readastext» lit le fichier comme une chaîne de texte, et la méthode «readasdataurl» lit le fichier comme une url de données

comment puis-je afficher une barre de progression pendant que les fichiers sont téléchargés?

Vous pouvez afficher une barre de progression en écoutant l'événement «Progress» de l'objet XMLHTTPrequest. L’événement «Progress» est tiré périodiquement au fur et à mesure que le téléchargement progresse. Dans le gestionnaire d'événements, vous pouvez calculer le pourcentage de progression et mettre à jour la barre de progression en conséquence. Assurez-vous de définir la propriété «Télécharger» de l'objet XMLHTTPRequest sur True pour activer l'événement «Progress».

Comment puis-je gérer plusieurs téléchargements de fichiers?

Vous pouvez gérer plusieurs téléchargements de fichiers en itérant sur la propriété «datatransfer.files», quel est un objet fileList. Chaque élément de l'objet FileList est un objet de fichier représentant un fichier supprimé. Vous pouvez gérer chaque fichier individuellement, par exemple, en lisant son contenu ou en le téléchargeant sur le serveur.

Comment puis-je restreindre les types de fichiers qui peuvent être supprimés?

Vous pouvez restreindre les types de fichiers qui peuvent être supprimés des propriétés. La propriété «Type» est une chaîne représentant le type MIME du fichier. Si le type de fichier n'est pas autorisé, vous pouvez empêcher l'action de dépôt en appelant la méthode «empêcher default» de l'objet de l'événement dans le gestionnaire d'événements «Drop».

Comment puis-je gérer les événements de glisser-déposer pour les éléments imbriqués?

Gestion des événements de glisser-déposer pour les éléments imbriqués peut être délicat car les événements bouillonnent l'arbre Dom. Pour empêcher un élément parent de recevoir un événement de glisser-déposer destiné à un élément enfant, vous pouvez appeler la méthode «stoppropagation» de l'objet de l'événement dans le gestionnaire d'événements de l'élément enfant.

Comment puis-je personnaliser l'apparence de la zone de dépôt pendant que un fichier est glisser dessus? Les gestionnaires d'événements «Dragleave» et «Drop». Vous pouvez définir l'apparence de la classe dans votre CSS.

Comment puis-je tester les fonctionnalités de glisser-déposer dans les tests automatisés?

Le test de la fonctionnalité de glisser-déposer peut être difficile car il implique des interactions utilisateur complexes. Cependant, certaines bibliothèques de tests, comme le sélénium, fournissent des méthodes pour simuler des actions de glisser-déposer. Vous pouvez également créer un événement «Drop» simulé et le répartir à l'élément de zone de dépôt.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!