Comment ouvrir des fichiers abandonnés à l'aide de HTML5

Dans mon dernier article, comment utiliser le fichier html5 glisser-déposer , nous avons découvert comment utiliser l'API du fichier HTML5, implémenter des événements glisser-déposer et récupérer les informations de fichier. Aujourd'hui, nous tenterons de charger des fichiers sur le client à l'aide de JavaScript.

Pourquoi ouvrir les fichiers locaux en javascript?

Le téléchargement de fichiers à partir d'un formulaire HTML est maladroit. Les gens l'utilisent souvent lors du transfert de photographies de plusieurs mégaoctets de leur appareil photo vers un serveur Web. En supposant qu'ils localisent le fichier, le téléchargement ne pouvait prendre plusieurs minutes que pour constater qu'il s'agissait de la mauvaise photo, d'un format non pris en charge ou d'une taille de fichier plus grande que permis. Jusqu'à présent, les développeurs devaient compter sur Flash ou d'autres plugins pour offrir une meilleure expérience utilisateur. Le prétraitement en JavaScript offre un certain nombre d'avantages:

• Le traitement des fichiers local est rapide.
• Les fichiers peuvent être analysés pour s'assurer qu'ils sont le format correct et inférieur à une taille spécifique.
• Les fichiers tels que les images peuvent être prévisualisés avant le téléchargement.
• Il est possible de recadrer ou de redimensionner une image sur un élément de toile puis de télécharger le fichier résultant.

L'objet FileReader

FileReader fait partie de l'API de fichier W3C et propose quatre méthodes pour charger de manière asynchrone des données à partir d'un fichier référencé dans un objet de fichier:

• .readastext (fichier f, [codage]): lit le fichier f dans une chaîne. Le codage UTF-8 est supposé, mais le paramètre de codage facultatif peut spécifier un format différent.
• .readasdataurl (fichier f): lit le fichier f dans une URL de données codée
• .readasbinarystring (fichier f): lit le fichier f en tant que chaîne binaire
• .readasArrayBuffer (fichier f): lit le fichier f comme un objet ArrayBuffer.

Dans le code suivant, nous utiliserons les deux premières méthodes pour charger et afficher des fichiers de texte et d'image.

Ouverture de fichiers de manière asynchrone dans JavaScript

Voici notre fonction PARSEFILE () d'origine qui est passé un objet de fichier lorsqu'il est sélectionné ou déposé sur l'élément #FileDrag:

// output file information
function ParseFile(file) {

	Output(
		"<p>File information: <strong>" + file.name +
		"</strong> type: <strong>" + file.type +
		"</strong> size: <strong>" + file.size +
		"</strong> bytes</p>"
	);
	
}

Après la mise à jour de l'état, nous vérifierons si nous avons un fichier texte (texte / plaine, texte / html, texte / css, etc.), le charger à l'aide de la méthode fileReader.readastext () et afficher le résultat (après avoir échappé caractères):

	// display text
	if (file.type.indexOf("text") == 0) {
		var reader = new FileReader();
		reader.onload = function(e) {
			Output(
				"<p><strong>" + file.name + ":</strong></p><pre class="brush:php;toolbar:false">" + 
				e.target.result.replace(/</g, "&lt;").replace(/>/g, "&gt;") +
				"

" ); } reader.readAsText(file); }

De même, nous pouvons vérifier si nous avons un fichier image (image / jpeg, image / gif, image / png, etc.), le charger dans une URL de données à l'aide de la méthode fileReader.readaSDataurl () et transmettre le résultat à l'attribut SRC d'une balise IMG:

	// display an image
	if (file.type.indexOf("image") == 0) {
		var reader = new FileReader();
		reader.onload = function(e) {
			Output(
				"<p><strong>" + file.name + ":</strong><br />" +
				'<img src="' + e.target.result + '" /></p>'
			);
		}
		reader.readAsDataURL(file);
	}

Veuillez consulter la page de démonstration dans Firefox, Chrome ou Opera (pas de prise en charge de Drag & Drop). Vous pouvez également télécharger les fichiers pour examiner le code. Bien que cela soit utile, en fin de compte, nous devons télécharger nos fichiers sur un serveur Web. Restez à l'écoute pour comment télécharger de manière asynchrone des fichiers à l'aide de HTML5 et AJAX …

Les questions fréquemment posées (FAQ) sur HTML5 et JavaScript Open ont supprimé les fichiers

Quel est le but de l'utilisation de HTML5 et JavaScript pour ouvrir des fichiers abandonnés?

HTML5 et JavaScript sont utilisés pour ouvrir des fichiers abandonnés pour améliorer l'expérience utilisateur sur un site Web. Cette fonctionnalité permet aux utilisateurs de faire glisser et déposer des fichiers de leur système local sur une page Web. Une fois supprimé, les fichiers peuvent être lus et traités à l'aide de JavaScript. Cela peut être particulièrement utile pour les tâches telles que le téléchargement de fichiers, la lecture du contenu des fichiers ou le traitement d'images ou de documents dans une application Web.

Comment la fonction de glisser-déposer fonctionne-t-elle dans HTML5?

La fonction de glisser-déposer dans HTML5 est facilitée par un ensemble d'événements et de propriétés. Lorsqu'un utilisateur sélectionne un fichier sur son système et le fait glisser sur une page Web, l'événement «Dragover» est déclenché. Si le fichier est supprimé, l'événement «Drop» est déclenché. La propriété DataTransfer, qui fait partie de ces événements, contient les données de fichier et peut être utilisée pour accéder et traiter le fichier.

Comment puis-je lire le contenu d'un fichier supprimé à l'aide de JavaScript?

JavaScript fournit l'API FileReader pour lire le contenu des fichiers. Une fois qu'un fichier est déposé sur une page Web, il est accessible via la propriété Datatransfer. Un nouvel objet FileReader peut être créé et la méthode Readastext ou ReadAsDataurl peut être utilisée pour lire le contenu du fichier. Le résultat est accessible dans l'événement «Charge» de l'objet FileReader.

Puis-je ouvrir plusieurs fichiers supprimés à la fois?

Oui, vous pouvez ouvrir plusieurs fichiers supprimés à la fois. La propriété Datatransfer fournit une propriété «fichiers» qui est un objet FileList. Cet objet représente une liste de tous les fichiers abandonnés. Vous pouvez parcourir cette liste pour accéder et traiter chaque fichier individuellement.

Quels types de fichiers puis-je ouvrir en utilisant HTML5 et JavaScript?

Vous pouvez ouvrir n'importe quel type de fichier à l'aide de HTML5 et JavaScript. Cependant, la façon dont vous traitez le fichier dépendra de son type. Par exemple, les fichiers texte peuvent être lus comme du texte, tandis que les fichiers image peuvent être lus sous forme d'URL de données et affichés à l'aide d'un élément IMG.

Est-il sûr d'ouvrir des fichiers supprimés à l'aide de HTML5 et JavaScript?

Les fichiers ouverts à l'aide de HTML5 et JavaScript sont généralement sûrs car les fichiers ne sont pas lus et traités du côté client. Cependant, si les données de fichier sont envoyées à un serveur, elles doivent être correctement validées et désinfectées pour éviter les problèmes de sécurité.

Puis-je utiliser HTML5 et JavaScript pour ouvrir des fichiers supprimés sur tous les navigateurs?

Les navigateurs les plus modernes prennent en charge la fonction HTML5 Drag and Drop et le Javascript API. Cependant, il peut y avoir des différences dans la façon dont ces fonctionnalités sont implémentées. Par conséquent, il est important de tester votre code sur différents navigateurs pour garantir la compatibilité.

Comment puis-je afficher le contenu d'un fichier supprimé sur une page Web?

Le contenu d'un fichier supprimé peut être affiché sur une page Web à l'aide de JavaScript. Par exemple, si le fichier est une image, il peut être lu comme URL de données et défini comme l'attribut SRC d'un élément IMG. Si le fichier est un fichier texte, son contenu peut être inséré dans un élément de texte.

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

Bien que vous ne puissiez pas limiter directement les types de fichiers qui peuvent être supprimés, vous pouvez vérifier le type de fichier supprimé à l'aide de la propriété «Type» de l'objet de fichier. Si le type de fichier ne correspond pas aux types autorisés, vous pouvez afficher un message d'erreur et ignorer le fichier.

Puis-je faire glisser et déposer des fichiers à partir de différents dossiers?

Oui, vous pouvez faire glisser et déposer des fichiers à partir de différents dossiers. La fonction de glisser-déposer ne dépend pas de l'emplacement des fichiers. Tant que les fichiers peuvent être accessibles par l'utilisateur, ils peuvent être traînés et déposés sur une page Web.

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!