Get it on Google Play
10-07-2018
 

Desarrollo frontend: Tratamiento de ficheros en HTML5 y Javascript

API File HTML5

API File HTML5

Pues resulta que HTML5 tiene una estupenda API para poder trabajar con archivos. Esta API nos permite leer los archivos en distintos formatos. Después esto tiene muchas aplicaciones como poder partir ficheros grandes, tratamiento de ficheros antes del envió, etc.

Vamos a suponer que tenemos un pedacito de HTML donde tenemos un campo de formulario de tipo ‘file’ para leer ficheros y un ‘div’ donde mostraremos información del fichero:

<input id='file' type='file' onchange="javascript: changeFile();"/>

<div id='content'>
</div>

Vemos que tenemos un evento en el campo de fichero que llamará a la función ‘changeFile’ cada vez que se modifique el campo. La idea es que esta función lea el contenido del campo y, en caso de ser una imagen, muestre la imagen y meta el fichero en una estructura JSON(Esta estructura JSON después la podemos mandar por AJAX o lo que sea):

<script>
	var f=document.getElementById('file');
	var c=document.getElementById('content');

	function changeFile() {
		/* Estructura JSON donde se almacenará el fichero */
		var file={};
		file.name = f.files[0].name;
		file.size = f.files[0].size;
		file.type = f.files[0].type;
	
		/* Con FileReader leeremos el ficheros */
		var reader = new FileReader();

		/* Definimos la función que se ejecutará cuando se haya leído el fichero */
		reader.onloadend = function(evt) {	
			/* Ponemos en la estructura JSON el contenido del fichero */
			file.content=evt.target.result;

			/* Ponemos en el HTML el contenido */
			c.innerHTML="";
			if (file.type.indexOf("image/")!=-1) c.innerHTML+="<img src='"+evt.target.result+"' />";
			c.innerHTML+="<code>"+JSON.stringify( file )+"</code>";
			};	
	
		/* Leemos el fichero como una URL de datos(Base64) */
		reader.readAsDataURL( f.files[0] );
		}

</script>

Fijaros que hemos leído el fichero usando el método ‘readAsDataURL’ peró tenemos varias posibilidades:

  • readAsBinaryString(Blob|File): El fichero nos llegará en formato de cadena binaria.
  • readAsText(Blob|File, opt_encoding): El fichero nos llegará en formato de cadena de texto y, por defecto, el charset UTF-8
  • readAsDataURL(Blob|File): Es el que hemos usado en el ejemplo, los datos nos llegan en formato de URL de datos(Base64).
  • readAsArrayBuffer(Blob|File): El fichero nos llegará como un objeto ArrayBuffer.
  • Este es un pequeño ejemplo en Javascript Vainilla pero ya veréis que da mucho juego.

Si te ha servido, por favor comparte
 

Leave a Reply