Editando apunte: Ajax para copiar ficheros

Editando apunte: Ajax para copiar ficheros cerrar apuntes

ID: 138 (tabla: apuntes) Título:
Fecha: [poner fecha actual ]
Categorías: Vicisitudes de un Webmaster, Programación
Etiquetas: javascript, php, webmaster
Extras: javascript, php, webmaster
apunte: - - - - - - - -

<img src="logo.png" id="imagen" style="float: right; margin: 0 0 .5em 1em; padding: 1em; border: 3px ridge green;"/>
	[rss]Hemos visto como <a href="?titulo=Subir+archivos+con+Ajax&PHPSESSID=l1oeub7ojh09f2t8r5goaj8ah3">subir archivos con Ajax</a>, donde contábamos de un formulario y un control para seleccionar ficheros,
pero cómo lo haríamos sin esa selección...[/rss]


	No se me ocurre otra razón para este cometido que las funciones administrativas de una web, pero si existiesen otras,
con este apunte veremos cómo lograrlo.

Supongamos que nuestra intención es copiar nuestro logo (logo.png) que se encuentra en la raiz del dominio, a la carpeta "/ficheros".
	Tenemos que tener el mismo formulario y el mismo control "file" indicados en el anteriormente citado apunte,
pero podemos tenerlo oculto, así que nos valdremos de la ruta de la imagen.

El código que hemos asociado a un elemento de la página para nuestro objetivo es el siguiente:

<pre class="codigo">var logo;
function copiar()	{
	Ajax_1 = new XMLHttpRequest();
	Ajax_1.open('GET', tag("imagen").src, true);
	Ajax_1.responseType = "blob";
	Ajax_1.onload = function() {
		if (Ajax_1.status == 200) {
			logo = this.response;
			blob = new Blob([logo]);
			fd = new FormData(tag("prueba"));
			fd.append("fichero", blob, tag("imagen").src.substr(tag("imagen").src.lastIndexOf("/") + 1));
			Ajax_2 = new XMLHttpRequest();
			Ajax_2.open("POST", tag("prueba").action, true);
			Ajax_2.onreadystatechange = function()	{
				if	(Ajax_2.readyState == 4 && Ajax_2.status == 200) {
					tag("respuesta").innerHTML = Ajax_2.responseText;
				}
			}
			Ajax_2.send(fd);
		};
	};
	Ajax_1.send();
}</pre>

Encontramos algunas cosas nuevas que comentaremos a continuación.

<h3 class="subtitulo">
	Novedades
</h3>

Esperar una respuesta Ajax de un fichero sin parámetros es normal, pero habitualmente esperamos texto plano o con formato xml,
pero en este caso esperamos una imagen, así que hemos tenido que definir un nuevo atributo para nosostros: Ajax.responseType, indicando
el tipo de datos "blob".
	Tampoco nos serviría las respuestas más habituales: "responseText" y "responseXML", pero sí nos sirve "response" (a secas).


	Teniendo la respuesta en la variable "logo", tenemos que crear un objeto del tipo "Blob" con los datos recogidos,
y asignarlo al control del formulario con la instrucción append.


	Suponiendo que la respuesta del fichero que procesa el envío mediante Ajax tan solo muestre la variable $_FILES

<div class="codigo">
	print_r($_FILES);
</div>

	la respuesta obtenida es:

<pre id="respuesta" class="codigo">Array
(
 [fichero] => Array
 (
 [name] => logo.png
 [type] => application/octet-stream
 [tmp_name] => http://www.pepemolina.com/XXXXXXX.tmp
 [error] => 0
 [size] => 3500
 )
)</pre>

El código que nos falta es una comprobación de la existencia del fichero y la correspondiente copia:

<pre class="codigo">move_uploaded_file($_FILES["fichero"]["tmp_name"], "ficheros/".$_FILES["fichero"]["name"]);</pre>

	Esperamos que sea de utilidad.

Controles Otras tablas: imagenes, postales, categorias, etiquetas, extras - - (popup ) - que

Seleccionar nuevo apunte

categoria Nombre:
Controles Otras tablas: apuntes, imagenes, postales, etiquetas extras - - Seleccionar: categoria
Descripción: - - - - - - - -	Apuntes

extra Nombre:
Controles Otras tablas: apuntes, imagenes, postales, categorias etiquetas - - Seleccionar: extra
Descripción: - - - - - - - -	Apuntes

etiqueta Nombre:
Controles Otras tablas: apuntes, imagenes, postales, categorias extras - - Seleccionar: etiqueta
Descripción: - - - - - - - -	Apuntes

Editor del diario

Zona de comentarios

Evaluación