[Php-avanzado] consulta

[Matias Gea]

Hola, Daniel.

Hoy en día, subir archivos desde Javascript al server es relativamente
simple... Si el navegador lo soporta.

Para subir un archivo tenés que soportar dos cosas, primero el File API,
para poder leer el contenido del archivo a enviar, y luego FormData, que
son un conjunto de utilidades para crear la estructura de un formulario,
pero de manera programática, sin tener que poner los controles html.

El ejemplo corto y conciso lo ves en la uri que te pasó Leo (
http://geeks.ms/blogs/etomas/archive/2012/12/12/html5-apis-upload-de-ficheros-con-ajax-file-api-y-progress-api.aspx),
lo modifiqué un poco y comenté:

function subirFichero(file) {
/* se instancia el objeto xhr, este es el que hace el envío */
var xhr = new XMLHttpRequest();

/* se instancia el objeto FormData, que es el que prepara los datos para
enviar */
var formData = new FormData();

/* acá se agrega el archivo, va a llegar en $_FILES['archivo'] */
formData.append("archivo", file);

/* acá agregás más datos al envio */
formData.append("accion", 'guardar');
 formData.append("id_item", 45);

/* añadimos eventos para manejar el error y el éxito del envio */
 xhr.addEventListener("error", function(e) {
alert("Error subiendo el archivo.");
 }, false);

xhr.addEventListener("load", function(e) {
alert("fichero subido: " + e.target.status + "->" + e.target.statusText);
 });

/* seteamos parametros de conexión y enviamos, esto es igual que el ajax */
xhr.open('POST', '@Url.Action("Index")', true);
 xhr.send(formData);
}

Podés también agregar un escucha al evento "progress" para seguir el
progreso de la subida (cuantos bytes lleva subido el navegador).

Si tu navegador no soporta FileAPI o FormData, no podés subir por AJAX,
tenés que encontrar otra forma. Uno de los métodos más usados es tener un
iframe oculto en la página y que el target del formulario sea ese iframe.
Una vez que se haya enviado el archivo y que el server responda (recordá
que la respuesta queda en el iframe), la respuesta trae una instrucción
javascript, que ejecuta una funcion de "exito" en el parent, por ejemplo:

<script type="text/javascript">
parent.sucessfulUpload()
</script>

Este método es algo más sucio, pero efectivo. Si quisieras observar el
progreso, el server php debe tener instalada la extensión APC o algún otro
progress watcher (si querés más detalles, avisame).

Otra forma es utilizando un uploader en flash, pero tiene muchas
desventajas, principalmente, que usa flash.

Si tu uploader va a ser para un administrador o sistema privado (donde
podés poner requerimientos de software), o si no te importa no soportar
navegadores viejos e IE, te recomiendo el método HTML5 (FileApi, FormData,
XMLHttpRequest).

Cualquier cosa, pregunta.

Saludos!


2013/11/19 Leonardo Tadei - Pegasus Tech Supply <leonardot en pegasusnet.com.ar
>

> Hola Daniel,
>
>
> El mar, 19-11-2013 a las 20:07 -0300, Daniel Billia escribió:
> > Hola Leo lo único que lo quería hacer en ajax ya
> > que esta echa la rutina en ese formato pero si es
> > complicado cambiamos el formato
>
>
>         Tendrías que evaluar vos, respecto a tu código,qué cosa es más
> complicada.
>         Te envío unos enlaces que encontré que no usan bibliotecas pqra
> que los
> estudios.
>         No mezcles las formas de trabajar
>
> http://www.desarrolloweb.com/articulos/ajax-file-upload.html
>
> https://developer.tizen.org/help/index.jsp?topic=%
> 2Forg.tizen.web.appprogramming%2Fhtml%2Ftutorials%2Fw3c_tutorial%
> 2Fcomm_tutorial%2Fupload_ajax.htm
>
>
> http://geeks.ms/blogs/etomas/archive/2012/12/12/html5-apis-upload-de-ficheros-con-ajax-file-api-y-progress-api.aspx
>
> > Saludos
>
>         =mente
>
> --
> Leonardo Tadei
> leonardot en pegasusnet.com.ar
> Web: http://leonardo.tadei.com.ar
> Firma pública: http://www.pegasusnet.com.ar/LeonardoTadei-public.key
>
> _______________________________________________
> Lista de correo: Php-avanzado
> Mensajes a la lista: Php-avanzado en pato2.fi.mdp.edu.ar
> Administración Web:
> http://www3.fi.mdp.edu.ar/cgi-bin/mailman/listinfo/php-avanzado
> Desubscripción:
> php-avanzado-request en pato2.fi.mdp.edu.ar?subject=unsubscribe
>



-- 
Matias Fernando Gea
matigea en gmail.com
http://www.mfgea.com.ar
------------ próxima parte ------------
Se ha borrado un adjunto en formato HTML...
URL: <http://www3.fi.mdp.edu.ar/pipermail/php-avanzado/attachments/20131120/e140c8be/attachment.html>