JavaScript
File API, Blobs et FileReaders

Syntaxe

• reader = new FileReader ();

Paramètres

Remarques

Lire le fichier sous forme de chaîne

Assurez-vous d'avoir une entrée de fichier sur votre page:

<input type="file" id="upload">

Puis en JavaScript:

document.getElementById('upload').addEventListener('change', readFileAsString)
function readFileAsString() {
    var files = this.files;
    if (files.length === 0) {
        console.log('No file is selected');
        return;
    }

    var reader = new FileReader();
    reader.onload = function(event) {
        console.log('File content:', event.target.result);
    };
    reader.readAsText(files[0]);
}

Lire le fichier en tant que dataURL

La lecture du contenu d'un fichier dans une application Web peut être réalisée à l'aide de l'API de fichier HTML5. Tout d'abord, ajoutez une entrée avec type="file" dans votre code HTML:

<input type="file" id="upload">

Ensuite, nous allons ajouter un écouteur de modification sur l'entrée de fichier. Cet exemple définit l'écouteur via JavaScript, mais il pourrait également être ajouté en tant qu'attribut sur l'élément d'entrée. Cet écouteur est déclenché chaque fois qu'un nouveau fichier a été sélectionné. Dans ce rappel, nous pouvons lire le fichier sélectionné et effectuer d'autres actions (comme la création d'une image avec le contenu du fichier sélectionné):

document.getElementById('upload').addEventListener('change', showImage);

function showImage(evt) {
    var files = evt.target.files;

    if (files.length === 0) {
        console.log('No files selected');
        return;
    }

    var reader = new FileReader();
    reader.onload = function(event) {
        var img = new Image();
        img.onload = function() {
            document.body.appendChild(img);
        };
        img.src = event.target.result;
    };
    reader.readAsDataURL(files[0]);
}

Trancher un fichier

La méthode blob.slice() est utilisée pour créer un nouvel objet Blob contenant les données dans la plage d'octets spécifiée du blob source. Cette méthode est également utilisable avec les instances File, puisque File extend Blob.

Ici, nous découpons un fichier en une quantité spécifique de blobs. Ceci est particulièrement utile dans les cas où vous devez traiter des fichiers trop volumineux pour être lus en une seule fois. Nous pouvons alors lire les morceaux un par un en utilisant FileReader .

/**
* @param {File|Blob} - file to slice
* @param {Number} - chunksAmount
* @return {Array} - an array of Blobs
**/
function sliceFile(file, chunksAmount) {
  var byteIndex = 0;
  var chunks = [];
    
  for (var i = 0; i < chunksAmount; i += 1) {
    var byteEnd = Math.ceil((file.size / chunksAmount) * (i + 1));
    chunks.push(file.slice(byteIndex, byteEnd));
    byteIndex += (byteEnd - byteIndex);
  }

  return chunks;
}

Téléchargement csv côté client en utilisant Blob

function downloadCsv() {
  var blob = new Blob([csvString]);
  if (window.navigator.msSaveOrOpenBlob){
    window.navigator.msSaveBlob(blob, "filename.csv");
  }
  else {
    var a = window.document.createElement("a");

    a.href = window.URL.createObjectURL(blob, {
      type: "text/plain"
    });
    a.download = "filename.csv";
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  }
}
var string = "a1,a2,a3";
downloadCSV(string);

Référence source; https://github.com/mholt/PapaParse/issues/175

Sélection de plusieurs fichiers et restriction des types de fichiers

L'API de fichier HTML5 vous permet de restreindre les types de fichiers acceptés en définissant simplement l'attribut accept sur une entrée de fichier, par exemple:

<input type="file" accept="image/jpeg">

La spécification de plusieurs types MIME séparés par une virgule (par exemple, image/jpeg,image/png ) ou des caractères génériques (par exemple image/* pour autoriser tous les types d'images) vous permettent de restreindre rapidement le type de fichiers à sélectionner . Voici un exemple pour autoriser une image ou une vidéo:

<input type="file" accept="image/*,video*">

Par défaut, l'entrée de fichier permet à l'utilisateur de sélectionner un seul fichier. Si vous souhaitez activer la sélection de plusieurs fichiers, ajoutez simplement l'attribut multiple :

<input type="file" multiple>

Vous pouvez ensuite lire tous les fichiers sélectionnés via le tableau de files l'entrée du files . Voir le fichier lu comme dataUrl

Récupère les propriétés du fichier

Si vous souhaitez obtenir les propriétés du fichier (comme le nom ou la taille), vous pouvez le faire avant d’utiliser le lecteur de fichiers. Si nous avons le morceau de code HTML suivant:

<input type="file" id="newFile">

Vous pouvez accéder directement aux propriétés comme ceci:

document.getElementById('newFile').addEventListener('change', getFile);

function getFile(event) {
    var files = event.target.files
        , file = files[0];

    console.log('Name of the file', file.name);
    console.log('Size of the file', file.size);
}

Vous pouvez également obtenir facilement les attributs suivants: lastModified (Timestamp), lastModifiedDate (Date) et type (Type de fichier)