JavaScript
Archivo API, Blobs y FileReaders

Sintaxis

• lector = nuevo FileReader ();

Parámetros

Observaciones

Leer el archivo como una cadena

Asegúrese de tener una entrada de archivo en su página:

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

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

Leer el archivo como dataURL

La lectura del contenido de un archivo dentro de una aplicación web se puede lograr utilizando la API de archivos HTML5. Primero, agregue una entrada con type="file" en su HTML:

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

A continuación, vamos a agregar un detector de cambios en la entrada del archivo. Este ejemplo define al oyente a través de JavaScript, pero también podría agregarse como atributo en el elemento de entrada. Este oyente se activa cada vez que se selecciona un nuevo archivo. Dentro de esta devolución de llamada, podemos leer el archivo que se seleccionó y realizar otras acciones (como crear una imagen con el contenido del archivo seleccionado):

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

Cortar un archivo

El método blob.slice() se utiliza para crear un nuevo objeto Blob que contiene los datos en el rango especificado de bytes del Blob de origen. Este método también se puede usar con instancias de archivo, ya que el archivo extiende Blob.

Aquí cortamos un archivo en una cantidad específica de manchas. Esto es útil, especialmente en los casos en que necesita procesar archivos que son demasiado grandes para leerlos en la memoria de una vez. Luego podemos leer los fragmentos uno por uno usando 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;
}

Descarga csv del lado del cliente usando 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);

Fuente de referencia; https://github.com/mholt/PapaParse/issues/175

Seleccionando múltiples archivos y restringiendo tipos de archivos

La API de archivos HTML5 le permite restringir qué tipo de archivos se aceptan simplemente estableciendo el atributo de aceptación en una entrada de archivo, por ejemplo:

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

Especificar múltiples tipos MIME separados por comas (por ejemplo, image/jpeg,image/png ) o usar comodines (por ejemplo, image/* para permitir todo tipo de imágenes) le brinda una forma rápida y eficaz de restringir el tipo de archivos que desea seleccionar . Aquí hay un ejemplo para permitir cualquier imagen o video:

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

De forma predeterminada, la entrada del archivo permite al usuario seleccionar un solo archivo. Si desea habilitar la selección de múltiples archivos, simplemente agregue el atributo multiple :

<input type="file" multiple>

Luego puede leer todos los archivos seleccionados a través de la matriz de files la entrada de files . Ver archivo leído como dataUrl

Obtener las propiedades del archivo.

Si desea obtener las propiedades del archivo (como el nombre o el tamaño), puede hacerlo antes de usar el File Reader. Si tenemos el siguiente código html:

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

Puede acceder a las propiedades directamente de esta manera:

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

También puede obtener fácilmente los siguientes atributos: lastModified (Timestamp), lastModifiedDate (Date) y type ( type archivo)