Traitement des fichiers JavaScript, partie 2 - exemple de partage de code pour la lecture de fichiers

Dans mon blog précédent, j'ai présenté comment utiliser les fichiers en JavaScript, en me concentrant spécifiquement sur la façon d'obtenir l'objet Fichier. Ce n'est que lorsque l'utilisateur télécharge le fichier par téléchargement ou glisser-déposer que ces objets disposent des métadonnées du fichier. Une fois que vous disposez de ces fichiers, l’étape suivante consiste à lire les données de ces fichiers.

Type FileReader

Le type FileReader a une seule tâche, qui consiste à lire les données d'un fichier et à les stocker dans une variable JavaScript . Son API est intentionnellement conçue pour être la même que XMLHttpRequest, car ils chargent tous deux des données à partir d'une ressource externe (en dehors du navigateur). Les opérations de lecture sont asynchrones afin de ne pas obstruer le navigateur.

FileReader peut créer une variété de formats pour représenter les données d'un fichier, et le format renvoyé lorsque lit un fichier est requis. L'opération de lecture est complétée en appelant l'une des méthodes suivantes :

• readAsText() – renvoie le contenu du fichier en texte brut

• readAsBinaryString() – Renvoie le contenu du fichier sous forme de données binaires cryptéesString (cette méthode est obsolète, veuillez utiliser readAsArrayBuffer() à la place)

• readAsArrayBuffer() – Utilisez le formulaire ArrayBuffer pour renvoyer le contenu du fichier (utile pour les données binaires telles que les fichiers image)

• readAsDataURL() – Utilisez le formulaire URL de données pour renvoyer le contenu du fichier

Tout comme la méthode d'envoi de l'objet XHR initie une requête Http, chacune des méthodes ci-dessus initie une lecture de fichier. À ce stade, vous devez écouter l'événement load avant de commencer la lecture, event.target.result renvoie toujours le résultat de la lecture. Par exemple :

var reader = new FileReader();
reader.onload = function(event) {
    var contents = event.target.result;
    console.log("File contents: " + contents);
};

reader.onerror = function(event) {
    console.error("File could not be read! Code " + event.target.error.code);
};

reader.readAsText(file);

Dans cet exemple, nous lisons simplement le contenu du fichier et affichons le contenu sur la console sous forme de texte brut. L'opération onload est appelée lorsque le fichier est lu avec succès et l'opération onerror est appelée lorsqu'il ne peut pas être lu pour une raison quelconque. L'instance FileReader peut être obtenue via event.target dans le gestionnaire d'événements , et il est recommandé de l'utiliser de cette façon au lieu d'utiliser directement la variable reader. L'attribut result contient le contenu du fichier lorsque la lecture est réussie et le message d'erreur lorsque la lecture échoue.

Lire l'URI des données

Vous pouvez utiliser une méthode similaire pour lire le fichier en tant qu'URI de données. L'URI de données (parfois également appelé URL de données) est une option intéressante, par exemple. vous souhaitez afficher un fichier image lu sur le disque, vous pouvez le faire avec le code suivant :

var reader = new FileReader();
reader.onload = function(event) {
    var dataUri = event.target.result,
        img     = document.createElement("img");

    img.src = dataUri;
    document.body.appendChild(img);
};

reader.onerror = function(event) {
    console.error("File could not be read! Code " + event.target.error.code);
};

reader.readAsDataURL(file);

Ce code insère simplement un fichier image lu sur le disque sur la page. Étant donné que cet URI de données contient toutes les données de l'image, il peut être transmis directement à l'attribut src de l'image et affiché sur la page. Vous pouvez alternativement charger l'image et la dessiner sur un <<a href="http://www.php.cn/code/7892.html" target="_blank">canvas<code><<a href="http://www.php.cn/code/7892.html" target="_blank">canvas</a>>> /code>Up :

var reader = new FileReader();
reader.onload = function(event) {
    var dataUri = event.target.result,
        context = document.getElementById("mycanvas").getContext("2d"),
        img     = new Image();

    // wait until the image has been fully processed
    img.onload = function() {
        context.drawImage(img, 100, 100);
    };
    img.src = dataUri;
};

reader.onerror = function(event) {
    console.error("File could not be read! Code " + event.target.error.code);
};

reader.readAsDataURL(file);

Ce code charge les données de l'image dans un nouvel objet Image et les dessine sur un canevas (la largeur et la longueur sont toutes deux spécifiées à 100).

Les URI de données sont généralement utilisées à cet effet, mais peuvent être utilisées sur n'importe quel type de fichier. L'utilisation la plus courante de la lecture d'un fichier en tant qu'URI de données consiste à afficher rapidement le contenu du fichier dans une page Web.

Lecture des ArrayBuffers

Le type ArrayBuffer [1] a été initialement introduit dans le cadre de WebGL. Un Arraybuffer représente un nombre limité d'octets et peut être utilisé pour stocker des nombres de n'importe quelle taille. La façon de lire une donnée ArrayBuffer nécessite une vue spécifique. Par exemple, Int8Array traite les octets qu'elle contient comme un ensemble d'entiers signés de 8 bits, tandis que Float32Array traite les octets qu'elle contient comme une collection de nombres à virgule flottante de 32 bits. de . Ceux-ci sont appelés typeArray[2], ce qui vous oblige à travailler avec un type numérique spécifique, plutôt que de contenir des données de n'importe quel type (comme un tableau traditionnel).

Lors du traitement de fichiers binaires, vous pouvez d'abord utiliser ArrayBuffer, afin de pouvoir avoir un contrôle plus précis sur les données. Cela dépasse le cadre de ce blog d'expliquer tous les tenants et aboutissants d'ArrayBuffer, sachez simplement que vous pouvez facilement lire un fichier dans un ArrayBuffer lorsque vous en avez besoin. Vous pouvez transmettre un ArrayBuffer directement à la méthode send() d'un support entièrement XMLHttpRequest niveau 2[3] (pris en charge par la plupart des derniers navigateurs, y compris IE10 et Opera12).

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!