JavaScript
File API, Blob e FileReader

Sintassi

• reader = new FileReader ();

Parametri

Osservazioni

Leggi il file come stringa

Assicurati di avere un file in ingresso sulla tua pagina:

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

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

Leggi il file come dataURL

La lettura del contenuto di un file in un'applicazione Web può essere realizzata utilizzando l'API del file HTML5. Innanzitutto, aggiungi un input con type="file" nel tuo codice HTML:

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

Successivamente, aggiungeremo un listener di modifiche all'input del file. Questo esempio definisce l'ascoltatore tramite JavaScript, ma potrebbe anche essere aggiunto come attributo sull'elemento di input. Questo listener viene attivato ogni volta che viene selezionato un nuovo file. All'interno di questo callback, possiamo leggere il file che è stato selezionato ed eseguire ulteriori azioni (come la creazione di un'immagine con il contenuto del file selezionato):

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

Taglia un file

Il metodo blob.slice() viene utilizzato per creare un nuovo oggetto Blob contenente i dati nell'intervallo di byte specificato del BLOB di origine. Questo metodo è utilizzabile anche con le istanze di file, poiché File estende Blob.

Qui suddividiamo un file in una quantità specifica di BLOB. Questo è utile soprattutto nei casi in cui è necessario elaborare file troppo grandi per essere letti in memoria tutti in una volta. Possiamo quindi leggere i blocchi uno per uno utilizzando 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;
}

Download csv lato client tramite 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);

Fonte di riferimento; https://github.com/mholt/PapaParse/issues/175

Selezione di più file e limitazione dei tipi di file

L'API del file HTML5 ti consente di limitare il tipo di file accettati semplicemente impostando l'attributo accept su un file input, ad esempio:

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

Specificare più tipi MIME separati da una virgola (ad esempio image/jpeg,image/png ) o utilizzare caratteri jolly (ad esempio image/* per consentire tutti i tipi di immagini) offre un modo rapido e potente per limitare il tipo di file che si desidera selezionare . Ecco un esempio per consentire qualsiasi immagine o video:

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

Per impostazione predefinita, l'input del file consente all'utente di selezionare un singolo file. Se vuoi abilitare la selezione di file multipli, aggiungi semplicemente l'attributo multiple :

<input type="file" multiple>

È quindi possibile leggere tutti i file selezionati tramite l'array di files di input del files . Vedi file di lettura come dataUrl

Ottieni le proprietà del file

Se si desidera ottenere le proprietà del file (come il nome o la dimensione), è possibile farlo prima di utilizzare il Lettore file. Se abbiamo la seguente parte di codice html:

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

Puoi accedere direttamente alle proprietà in questo modo:

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

Puoi anche ottenere facilmente i seguenti attributi: lastModified (Timestamp), lastModifiedDate (Date) e type (File Type)