JavaScript
Datei-API, Blobs und FileReaders

Syntax

• reader = new FileReader ();

Parameter

Bemerkungen

Datei als String lesen

Stellen Sie sicher, dass auf Ihrer Seite eine Datei eingegeben wird:

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

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

Datei als dataURL lesen

Das Lesen des Inhalts einer Datei innerhalb einer Webanwendung kann mithilfe der HTML5-Datei-API durchgeführt werden. Fügen Sie zunächst eine Eingabe mit type="file" in Ihren HTML-Code ein:

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

Als Nächstes fügen wir einen Änderungslistener für die Dateieingabe hinzu. In diesem Beispiel wird der Listener über JavaScript definiert. Er kann jedoch auch als Attribut für das Eingabeelement hinzugefügt werden. Dieser Listener wird jedes Mal ausgelöst, wenn eine neue Datei ausgewählt wurde. In diesem Rückruf können wir die ausgewählte Datei lesen und weitere Aktionen ausführen (z. B. ein Bild mit dem Inhalt der ausgewählten Datei erstellen):

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

Schneiden Sie eine Datei

Die blob.slice() -Methode wird zum Erstellen eines neuen Blob-Objekts verwendet, das die Daten im angegebenen Bytebereich des Quell-Blob enthält. Diese Methode kann auch mit File-Instanzen verwendet werden, da File Blob erweitert.

Hier schneiden wir eine Datei in eine bestimmte Anzahl von Blobs. Dies ist vor allem in Fällen nützlich, in denen Sie Dateien verarbeiten müssen, die zu groß sind, um in einen Arbeitsspeicher eingelesen zu werden. Wir können die Chunks dann mit 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-seitiger CSV-Download mit 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);

Quellenreferenz; https://github.com/mholt/PapaParse/issues/175

Mehrere Dateien auswählen und Dateitypen einschränken

Mit der HTML5-Datei-API können Sie einschränken, welche Art von Dateien akzeptiert werden, indem Sie einfach das Accept-Attribut für eine Dateieingabe festlegen, z.

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

Wenn Sie mehrere MIME-Typen angeben, die durch ein Komma getrennt sind (z. B. image/jpeg,image/png ) oder Platzhalter verwenden (z. B. image/* um alle Arten von Bildern zuzulassen), können Sie den Dateityp, den Sie auswählen möchten, schnell und effektiv einschränken . Hier ist ein Beispiel für das Zulassen von Bildern oder Videos:

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

Standardmäßig erlaubt die Dateieingabe dem Benutzer, eine einzelne Datei auszuwählen. Wenn Sie die Auswahl mehrerer Dateien aktivieren möchten, fügen Sie einfach das multiple Attribut hinzu:

<input type="file" multiple>

Sie können dann alle ausgewählten Dateien über die Datei - Eingang des lesen files Array. Siehe gelesene Datei als dataUrl

Rufen Sie die Eigenschaften der Datei ab

Wenn Sie die Eigenschaften der Datei (wie Name oder Größe) abrufen möchten, können Sie dies vor der Verwendung des File Readers tun. Wenn wir den folgenden HTML-Code haben:

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

Sie können auf die Eigenschaften direkt wie folgt zugreifen:

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

Sie können auch leicht die folgenden Attribute erhalten: lastModified ( lastModified ), lastModifiedDate (Date) und type ( lastModifiedDate )