El objeto FileReader

Descubra qué es un objeto FileReader y cómo usarlo

losFileReaderobjeto lee de forma asincrónica el contenido de un archivo.

Expone esos 4 métodos de lectura que podemos usar para iniciar un proceso de lectura:

  • readAsText()
  • readAsDataURL()
  • readAsArrayBuffer()
  • readAsBinaryString()

y unabort()método para detener cualquier operación de lectura.

La lectura del archivo es asincrónica y el objeto expone varios eventos a los que podemos conectarnos para seguir el progreso de la operación:

  • onloadse activa cuando la lectura finaliza con éxito
  • onloadstartse activa cuando comienza la lectura
  • onprogressse activa cuando la lectura está en progreso
  • onloadendse activa cuando la lectura finaliza, con éxito o sin éxito
  • onerrorse activa cuando ocurre un error
  • onabortse activa cuando se cancela la lectura

Una vez que se completa una operación de lectura,resultpropiedad de FileReader contiene el contenido del archivo.

loserrorLa propiedad contiene el mensaje de error, si se produjo un error, yreadyStatecontiene el estado de las operaciones -0si no se cargan datos,1si la carga de datos está en curso, y2si la carga ha terminado.

readAsText()

Carga el contenido de ungotaen una cadena de texto.

En este ejemplo usamos ese texto y lo colocamos en el#contentHTML interno del elemento:

//..file is available as a blob

const reader = new FileReader()

reader.onload = event => { const text = reader.result document.getElementById(‘content’).innerHTML = text }

reader.onerror = (e) => { console.error(e) }

reader.readAsText(file)

A continuación, se muestra un ejemplo que lee el contenido de un archivo de texto cuando se carga con uninputelemento e imprime su contenido en la consola:

<input type="file" allow="text/*" />
const input = document.querySelector('input')

input.addEventListener(‘change’, e => { const reader = new FileReader()

<span style="color:#a6e22e">reader</span>.<span style="color:#a6e22e">onload</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">event</span> =&gt; {
  <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">text</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">reader</span>.<span style="color:#a6e22e">result</span>
  <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">text</span>)
}

<span style="color:#a6e22e">reader</span>.<span style="color:#a6e22e">onerror</span> <span style="color:#f92672">=</span> (<span style="color:#a6e22e">e</span>) =&gt; {
  <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">error</span>(<span style="color:#a6e22e">e</span>)
}

<span style="color:#a6e22e">reader</span>.<span style="color:#a6e22e">readAsText</span>(<span style="color:#a6e22e">input</span>.<span style="color:#a6e22e">files</span>[<span style="color:#ae81ff">0</span>])

})

readAsDataURL()

Carga el contenido de un blob en unURL de datos.

//..file is available as a blob

const reader = new FileReader()

reader.onload = event => { const dataURL = event.target.result document.getElementById(‘image’).src = dataURL }

reader.readAsDataURL(file)

readAsArrayBuffer()

Carga el contenido de un blob en unArrayBuffer.

//..file is available as a blob

const reader = new FileReader()

reader.onload = event => { const buffer = reader.result const data = new Int32Array(buffer) //… }

reader.onerror = (e) => { console.error(e) }

reader.readAsArrayBuffer(file)


Más tutoriales de navegador: