JavaScript
File API, Blobs och FileReaders

Syntax

• läsare = ny FileReader ();

parametrar

Anmärkningar

Läs fil som sträng

Se till att ha en filinmatning på din sida:

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

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

Läs fil som dataURL

Läsa innehållet i en fil i en webbapplikation kan uppnås genom att använda HTML5 File API. Lägg först en inmatning med type="file" i din HTML:

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

Därefter ska vi lägga till en förändringslyssnare på filinmatningen. Detta exempel definierar lyssnaren via JavaScript, men det kan också läggas till som attribut på ingångselementet. Den här lyssnaren aktiveras varje gång en ny fil har valts. Inom denna återuppringning kan vi läsa filen som valts och utföra ytterligare åtgärder (som att skapa en bild med innehållet i den valda filen):

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

Skär en fil

blob.slice() används för att skapa ett nytt Blob-objekt som innehåller data i det angivna området för byte från källan Blob. Den här metoden är användbar även i File-instanser eftersom File utökar Blob.

Här delar vi en fil i en viss mängd klumpar. Detta är användbart särskilt i de fall där du behöver behandla filer som är för stora för att kunna läsas i minnet på en gång. Vi kan sedan läsa bitarna en och en med 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;
}

Nedladdning av klientsidan csv med 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);

Källreferens; https://github.com/mholt/PapaParse/issues/175

Välja flera filer och begränsa filtyper

HTML5-fil-API: n låter dig begränsa vilken typ av filer som accepteras genom att helt enkelt ställa in acceptattributet på en filinmatning, t.ex.:

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

Att specificera flera MIME-typer separerade med komma (t.ex. image/jpeg,image/png ) eller använda jokertecken (t.ex. image/* för att tillåta alla typer av bilder) ger dig ett snabbt och kraftfullt sätt att begränsa typen av filer du vill välja . Här är ett exempel för att tillåta valfri bild eller video:

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

Som standard låter filinmatningen användaren välja en enda fil. Om du vill aktivera val av flera filer lägger du bara till multiple attribut:

<input type="file" multiple>

Du kan sedan läsa alla valda filer via files filarray. Se läsfil som dataUrl

Hämta filens egenskaper

Om du vill få filens egenskaper (som namnet eller storleken) kan du göra det innan du använder filläsaren. Om vi har följande HTML-kod:

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

Du kan komma åt egenskaperna direkt så här:

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

Du kan också enkelt få följande attribut: lastModified (Timestamp), lastModifiedDate (Date) och type (File Type)