Comment lire des fichiers en JS

Comment lire les fichiers sur le navigateur en JavaScript ? Je vais le partager avec vous en détail dans l'article. J'espère que cela sera utile à tout le monde.

Étant donné que l'API Web en JavaScript dispose d'une nouvelle méthode API de fichier, il est plus pratique pour nous de lire des fichiers et de traiter des données sur le navigateur sans utiliser de serveur principal.

FileReader lit les données d'un fichier et les stocke dans une variable JavaScript. Cela a la même signification que XMLHttpRequest. Ils chargent tous deux des données à partir d'une ressource externe et l'opération de lecture est asynchrone. bouché. Il existe différentes méthodes pour les opérations de lecture, telles que les méthodes suivantes

(1) readAsText() – renvoie le contenu du fichier sous forme de texte brut

Le Le La méthode readAsText() peut être utilisée pour lire des fichiers texte. Cette méthode a deux paramètres. Le premier paramètre est l'objet File ou Blob à lire. Le deuxième paramètre est utilisé pour spécifier l'encodage du fichier. Le deuxième paramètre est facultatif. S’il n’est pas spécifié, UTF-8 utilise par défaut l’encodage. Dans les paramètres, vous devez définir un écouteur d'événements après le chargement du fichier. Lorsque l'événement onload est appelé, nous pouvons vérifier le contenu du fichier obtenu par l'attribut de résultat FileReader.

<input type="file" id="file" />
	<script type="text/javascript">
var file=document.getElementById("file");
var reader = new FileReader();
reader.onload=function(e){
	var text=reader.result;
}
reader.readAsText(file);
</script>

(2) méthode readAsArrayBuffer()

Cette méthode lira un objet Blob ou File et générera un ArrayBuffer. Lorsque l'opération de lecture est terminée, readyState passe à done (completed) et l'événement loadend est déclenché. En même temps, l'attribut result contiendra un objet ArrayBuffer pour représenter les données du fichier lu. tampon de données. Lors de l'exploitation de fichiers, tels que la conversion d'images JPEG en PNG

<script type="text/javascript">
var file=document.getElementById("file");
var reader = new FileReader();
reader.onload=function(e){
	var readAsArrayBuffer=reader.result;
}
reader.readAsArrayBuffer(file);
</script>

(3) readAsDataURL() renvoie le contenu du fichier sous la forme d'une URL de données

Cette méthode accepte un fichier ou un blob pour générer une URL de données, qui est essentiellement une chaîne de données de fichier codée en base64. Cette URL de données peut être utilisée pour définir des éléments tels que les attributs d'image src. >

<script type="text/javascript">
var file=document.getElementById("file");
var reader = new FileReader();
reader.onload=function(e){
	 var dataURL = reader.result;
}
reader.readAsDataURL(file);
</script>

Lorsque vous utilisez les trois méthodes ci-dessus, vous devez écouter l'événement de chargement avant de commencer la lecture, et event.target.result renvoie le résultat de la lecture.

Résumé : Ce qui précède représente tout le contenu de cet article, j'espère qu'il sera utile à l'étude de chacun.

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!