JavaScript
File API, Blobs en FileReaders

Syntaxis

• reader = new FileReader ();

parameters

Opmerkingen

Bestand lezen als tekenreeks

Zorg ervoor dat u een bestandsinvoer op uw pagina heeft:

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

Vervolgens in 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]);
}

Bestand lezen als dataURL

Het lezen van de inhoud van een bestand in een webtoepassing kan worden bereikt met behulp van de HTML5 File API. Voeg eerst een invoer met type="file" aan uw HTML:

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

Vervolgens gaan we een veranderlistener toevoegen aan de bestandsinvoer. Dit voorbeeld definieert de luisteraar via JavaScript, maar het kan ook worden toegevoegd als attribuut op het invoerelement. Deze luisteraar wordt geactiveerd telkens wanneer een nieuw bestand is geselecteerd. Binnen deze callback kunnen we het geselecteerde bestand lezen en verdere acties uitvoeren (zoals een afbeelding maken met de inhoud van het geselecteerde bestand):

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]);
}

Snijd een bestand

De methode blob.slice() wordt gebruikt om een nieuw Blob-object te maken dat de gegevens in het opgegeven bytesbereik van de bron Blob bevat. Deze methode is ook bruikbaar met File-instanties, omdat File Blob uitbreidt.

Hier snijden we een bestand in een specifieke hoeveelheid blobs. Dit is vooral handig als u bestanden moet verwerken die te groot zijn om in één keer in het geheugen te lezen. We kunnen de stukjes vervolgens één voor één lezen met behulp van 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;
}

Client-side csv-download met 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);

Bron referentie; https://github.com/mholt/PapaParse/issues/175

Meerdere bestanden selecteren en bestandstypen beperken

Met de HTML5-bestands-API kunt u beperken welk soort bestanden worden geaccepteerd door eenvoudig het kenmerk accept in te stellen voor een bestandsinvoer, bijvoorbeeld:

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

Als u meerdere MIME-typen opgeeft, gescheiden door een komma (bijv. Afbeelding image/jpeg,image/png ) of het gebruik van jokertekens (bijv. Afbeelding image/* voor het toestaan van alle soorten afbeeldingen), krijgt u een snelle en krachtige manier om het type bestanden te beperken dat u wilt selecteren . Hier is een voorbeeld voor het toestaan van elke afbeelding of video:

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

Standaard laat de bestandsinvoer de gebruiker een enkel bestand selecteren. Als u selectie van meerdere bestanden wilt inschakelen, voegt u gewoon het kenmerk multiple toe:

<input type="file" multiple>

U kunt vervolgens alle geselecteerde bestanden lezen via de bestandsarray van de files . Zie gelezen bestand als dataUrl

Verkrijg de eigenschappen van het bestand

Als u de eigenschappen van het bestand wilt ophalen (zoals de naam of de grootte), kunt u dit doen voordat u de bestandslezer gebruikt. Als we de volgende HTML-code hebben:

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

U kunt de eigenschappen direct als volgt openen:

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);
}

U kunt ook eenvoudig de volgende kenmerken krijgen: lastModified (Tijdstempel), lastModifiedDate (Datum) en type (Bestandstype)