<div dir="ltr">Me olvidaba, para ver compatibilidad de funcionalidades, buscá FileApi y FormData en <a href="http://caniuse.com">http://caniuse.com</a>.<div><br></div><div>Saludos!</div></div><div class="gmail_extra"><br><br>
<div class="gmail_quote">El 20 de noviembre de 2013 00:31, Matias Gea <span dir="ltr"><<a href="mailto:matigea@gmail.com" target="_blank">matigea@gmail.com</a>></span> escribió:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<div dir="ltr">Hola, Daniel.<br><div><br></div><div>Hoy en día, subir archivos desde Javascript al server es relativamente simple... Si el navegador lo soporta.</div><div><br></div><div>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.</div>
<div><br></div><div>El ejemplo corto y conciso lo ves en la uri que te pasó Leo (<a href="http://geeks.ms/blogs/etomas/archive/2012/12/12/html5-apis-upload-de-ficheros-con-ajax-file-api-y-progress-api.aspx" target="_blank">http://geeks.ms/blogs/etomas/archive/2012/12/12/html5-apis-upload-de-ficheros-con-ajax-file-api-y-progress-api.aspx</a>), lo modifiqué un poco y comenté:</div>
<div><br></div><div><div>function subirFichero(file) {</div><div><span style="white-space:pre-wrap"> </span>/* se instancia el objeto xhr, este es el que hace el envío */</div><div><span style="white-space:pre-wrap"> </span>var xhr = new XMLHttpRequest();</div>
<div><br></div><div><span style="white-space:pre-wrap"> </span>/* se instancia el objeto FormData, que es el que prepara los datos para enviar */</div><div><span style="white-space:pre-wrap"> </span>var formData = new FormData();</div>
<div><br></div><div><span style="white-space:pre-wrap"> </span>/* acá se agrega el archivo, va a llegar en $_FILES['archivo'] */</div><div><span style="white-space:pre-wrap"> </span>formData.append("archivo", file);</div>
<div><br></div><div><span style="white-space:pre-wrap"> </span>/* acá agregás más datos al envio */</div><div><span style="white-space:pre-wrap"> </span>formData.append("accion", 'guardar');</div>
<div><span style="white-space:pre-wrap"> </span>formData.append("id_item", 45);</div><div><br></div><div><span style="white-space:pre-wrap"> </span>/* añadimos eventos para manejar el error y el éxito del envio */</div>
<div><span style="white-space:pre-wrap"> </span>xhr.addEventListener("error", function(e) {</div><div><span style="white-space:pre-wrap"> </span>alert("Error subiendo el archivo.");</div><div>
<span style="white-space:pre-wrap"> </span>}, false);</div><div><br></div><div><span style="white-space:pre-wrap"> </span>xhr.addEventListener("load", function(e) {</div><div><span style="white-space:pre-wrap"> </span>alert("fichero subido: " + e.target.status + "->" + e.target.statusText);</div>
<div><span style="white-space:pre-wrap"> </span>});</div><div><br></div><div><span style="white-space:pre-wrap"> </span>/* seteamos parametros de conexión y enviamos, esto es igual que el ajax */</div><div><span style="white-space:pre-wrap"> </span>xhr.open('POST', '@Url.Action("Index")', true);</div>
<div><span style="white-space:pre-wrap"> </span>xhr.send(formData);</div><div>}<br></div></div><div><br></div><div>Podés también agregar un escucha al evento "progress" para seguir el progreso de la subida (cuantos bytes lleva subido el navegador).</div>
<div><br></div><div>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:</div>
<div><br></div><div><script type="text/javascript"></div><div>parent.sucessfulUpload()</div><div><div></script></div></div><div><br></div><div>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).</div>
<div><br></div><div>Otra forma es utilizando un uploader en flash, pero tiene muchas desventajas, principalmente, que usa flash.</div><div><br></div><div>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).</div>
<div><br></div><div>Cualquier cosa, pregunta.</div><div><br></div><div>Saludos!</div></div><div class="gmail_extra"><div><div class="h5"><br><br><div class="gmail_quote">2013/11/19 Leonardo Tadei - Pegasus Tech Supply <span dir="ltr"><<a href="mailto:leonardot@pegasusnet.com.ar" target="_blank">leonardot@pegasusnet.com.ar</a>></span><br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">Hola Daniel,<br>
<br>
<br>
El mar, 19-11-2013 a las 20:07 -0300, Daniel Billia escribió:<br>
<div>> Hola Leo lo único que lo quería hacer en ajax ya<br>
> que esta echa la rutina en ese formato pero si es<br>
> complicado cambiamos el formato<br>
<br>
<br>
</div> Tendrías que evaluar vos, respecto a tu código,qué cosa es más<br>
complicada.<br>
Te envío unos enlaces que encontré que no usan bibliotecas pqra que los<br>
estudios.<br>
No mezcles las formas de trabajar<br>
<br>
<a href="http://www.desarrolloweb.com/articulos/ajax-file-upload.html" target="_blank">http://www.desarrolloweb.com/articulos/ajax-file-upload.html</a><br>
<br>
<a href="https://developer.tizen.org/help/index.jsp?topic=%" target="_blank">https://developer.tizen.org/help/index.jsp?topic=%</a><br>
2Forg.tizen.web.appprogramming%2Fhtml%2Ftutorials%2Fw3c_tutorial%<br>
2Fcomm_tutorial%2Fupload_ajax.htm<br>
<br>
<a href="http://geeks.ms/blogs/etomas/archive/2012/12/12/html5-apis-upload-de-ficheros-con-ajax-file-api-y-progress-api.aspx" target="_blank">http://geeks.ms/blogs/etomas/archive/2012/12/12/html5-apis-upload-de-ficheros-con-ajax-file-api-y-progress-api.aspx</a><br>
<br>
> Saludos<br>
<br>
=mente<br>
<span><font color="#888888"><br>
--<br>
Leonardo Tadei<br>
<a href="mailto:leonardot@pegasusnet.com.ar" target="_blank">leonardot@pegasusnet.com.ar</a><br>
Web: <a href="http://leonardo.tadei.com.ar" target="_blank">http://leonardo.tadei.com.ar</a><br>
Firma pública: <a href="http://www.pegasusnet.com.ar/LeonardoTadei-public.key" target="_blank">http://www.pegasusnet.com.ar/LeonardoTadei-public.key</a><br>
</font></span><div><div><br>
_______________________________________________<br>
Lista de correo: Php-avanzado<br>
Mensajes a la lista: <a href="mailto:Php-avanzado@pato2.fi.mdp.edu.ar" target="_blank">Php-avanzado@pato2.fi.mdp.edu.ar</a><br>
Administración Web: <a href="http://www3.fi.mdp.edu.ar/cgi-bin/mailman/listinfo/php-avanzado" target="_blank">http://www3.fi.mdp.edu.ar/cgi-bin/mailman/listinfo/php-avanzado</a><br>
Desubscripción: <a href="http://php-avanzado-request@pato2.fi.mdp.edu.ar?subject=unsubscribe" target="_blank">php-avanzado-request@pato2.fi.mdp.edu.ar?subject=unsubscribe</a><br>
</div></div></blockquote></div><br><br clear="all"><div><br></div></div></div><span class="HOEnZb"><font color="#888888">-- <br>Matias Fernando Gea<br><a href="mailto:matigea@gmail.com" target="_blank">matigea@gmail.com</a><br>
<a href="http://www.mfgea.com.ar" target="_blank">http://www.mfgea.com.ar</a>
</font></span></div>
</blockquote></div><br><br clear="all"><div><br></div>-- <br>Matias Fernando Gea<br><a href="mailto:matigea@gmail.com" target="_blank">matigea@gmail.com</a><br><a href="http://www.mfgea.com.ar" target="_blank">http://www.mfgea.com.ar</a>
</div>