El diario de Pepe Molina (Caricatos)

Hasta hace poco, la forma de subir archivos era a través del envío de un formulario, y se podía "simular" el uso de la tecnología "Ajax" dirigiendo el resultado a un iframe

Última caricatura

IV Asamblea de la AEC: IV Asamblea General de la Asociación Española de Caricaturistas

RSS de las imágenes:

La Cita

Es un milagro que la curiosidad sobreviva a la educación reglada

Albert Einstein, físico estadounidense de origen alemán (1879-1955).

En esta zona están las páginas personales del autor.

Mis Enlaces

Mis clientes ahora también son mis amigos (aunque les cobre).

Mis Clientes

En Mis amigos Informáticos hay una pequeña colección de páginas de colegas webmasters..

Mis Amigos Informáticos

En Mis amigos artistas podemos encontrar artistas de cualquier índole (dibujantes, pintores, escritores...)

Mis Amigos Artistas

Las recomendaciones que proponemos son de índole variada.

Mis recomendaciones

Aquí un cajón de sastre de enlaces.

Interés General

Nos referencian desde sitios de toda índole.

Referencias externas

Puede contribuir a mantener esta página con su donativo.

Subir archivos con Ajax

Publicado el día 01 de julio de 2014
id=137; categorías: Vicisitudes de un Webmaster, Globalización, Programación

Hasta hace poco, la forma de subir archivos era a través del envío de un formulario, y se podía "simular" el uso de la tecnología "Ajax" dirigiendo el resultado a un iframe (oculto o no), como hacíamos en este artículo: Revisar las imágenes antes de subirlas.

Con el nivel 2 del objeto XMLHttpRequest y los objetos FormData se puede lograr subir ficheros sin tener que pulsar el botón destinado al envío de un formulario.

Usando el evento de cambio de estado de un control file vamos a subir el fichero que elijamos. Por el asunto de la accesibilidad usaremos un formulario con su botón de envío, pero "maquillado" en etiquetas "noscript":

<form action="recibir.php" method="post" enctype="multipart/form-data" id="formulario">
	<label for="fichero">
		Fichero que se enviará:
	</label>
	<input type="file" name="fichero" id="fichero"/>
	<noscript>
		<button type="submit">
			Enviar Archivo
		</button>
	</noscript>
</form>

La función Ajax para subir el fichero y que asociaremos al evento de cambio del control "fichero" llevará estas líneas:

function tag(id) {return document.getElementById(id);};
function subir_con_Ajax()	{
	fd = new FormData(tag("formulario"));
	Ajax = new XMLHttpRequest();
	Ajax.open("POST", tag("formulario").action, true);
	Ajax.onreadystatechange = function() {
		if	(Ajax.readyState == 4 && Ajax.status == 200) {
			alert(Ajax.responseText);
		}
	}
	Ajax.send(fd);
}

Con este sencillo código en nuestra página y unas pocas líneas de código en el fichero que procese el formulario en el servidor, ya podemos subir nuestros ficheros seleccionados.

<< primer apunte < apunte anterior apunte siguiente > último apunte >>