Foros del Web » Programando para Internet » Javascript »

Subir fichero como parte de un form

Estas en el tema de Subir fichero como parte de un form en el foro de Javascript en Foros del Web. Hola a todos, he estado buscando por internet distintas soluciones para lo que planteo, pero no encuentro nada. Lo que estoy intentando hacer es un ...
  #1 (permalink)  
Antiguo 03/05/2012, 16:35
 
Fecha de Ingreso: septiembre-2009
Mensajes: 38
Antigüedad: 14 años, 7 meses
Puntos: 0
Subir fichero como parte de un form

Hola a todos, he estado buscando por internet distintas soluciones para lo que planteo, pero no encuentro nada.
Lo que estoy intentando hacer es un formulario en que uno de los campos es un select y el otro es un fichero, de tal forma que al dar al botón submit, se envién los datos del formulario asíncronamente.

Sé que ajax de jquery no permite el envío asíncrono de ficheros, y que necesitaría algún otro plugin de jquery (como por ejemplo jquery fileupload); sin embargo, no encuentro nada parecido a lo que indico, todos los ejemplos que aparecen son botones de adjuntar ficheros y enviar.

Mi formulario es:

<form id="update_contador" name="update_contador" class="formation">
<ul>
<table>
<tr align="center">
<td width="465">
<select name="speedAa" id="speedAa">
<%
System.out.println("Comienza la ejecución código java de"
+ "actualizar contador");

System.out.println("Número de contadores almacenados : " + pp.size());
for (int i=0; i<pp.size();i++){
String salida = pp.get(i).toString();

System.out.println("Direccion " + i +": "+salida);
%>
<option value="<% out.print(salida); %>"><% out.print(salida); %></option>
<%}%>
</select>
</td>
<br/>
<td width="465">
Fichero: <input type="file" name="fichero" id="fichero"/><br/>
</td>
</tr>
</table>
</ul>
<div align="right">
<td colspan="2" >
<br/>
<input type="button" value="Enviar" onclick="envia()">
</td>
</div>
</form>

Gracias.
planets

Última edición por planets; 03/05/2012 a las 16:46
  #2 (permalink)  
Antiguo 03/05/2012, 16:46
 
Fecha de Ingreso: marzo-2007
Mensajes: 82
Antigüedad: 17 años, 1 mes
Puntos: 21
Respuesta: Subir fichero como parte de un form

Esto lo conseguí alguna vez con iframes ...
queres que te ponga un ejemplo ?
te lo pregunto por que hay gente que escribe la pregunta y no vuelve nunca mas :P
__________________
Hazle un favor a tu cerebro y juega Ajedrez online
Chess online
  #3 (permalink)  
Antiguo 03/05/2012, 16:52
 
Fecha de Ingreso: septiembre-2009
Mensajes: 38
Antigüedad: 14 años, 7 meses
Puntos: 0
Respuesta: Subir fichero como parte de un form

La verdad es que me harías un favor muy, pero que muy grande.

Muchísimas gracias
  #4 (permalink)  
Antiguo 03/05/2012, 16:57
 
Fecha de Ingreso: marzo-2007
Mensajes: 82
Antigüedad: 17 años, 1 mes
Puntos: 21
Respuesta: Subir fichero como parte de un form

Una pregunta, he visto que usas java, usas alguna librería para recibir el archivo ?
__________________
Hazle un favor a tu cerebro y juega Ajedrez online
Chess online
  #5 (permalink)  
Antiguo 03/05/2012, 17:06
 
Fecha de Ingreso: septiembre-2009
Mensajes: 38
Antigüedad: 14 años, 7 meses
Puntos: 0
Respuesta: Subir fichero como parte de un form

Para la recepción del fichero en el servidor uso la librería commons-fileupload-1.2.2. jar y commons-io-2.1.jar

De hecho la recepción y envío síncrono del formulario con el fichero adjunto, lo tengo hecho y me funciona bien; el problema radica en cuando lo quiero realizar asíncronamente.


Gracias
  #6 (permalink)  
Antiguo 03/05/2012, 17:24
 
Fecha de Ingreso: marzo-2007
Mensajes: 82
Antigüedad: 17 años, 1 mes
Puntos: 21
Respuesta: Subir fichero como parte de un form

Ok, mira yo una vez tuve que hacer un sistema de subida de ficheros con barra de progreso, osea, asincronamente tal cual lo necesitas, y empezé por un codigo como el siguiente (claro que luego se complico la cosa)
Tambien usaba esas librerías

En la pagina del formulario una cosa asi
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  4. <title>Insert title here</title>
  5. </head>
  6.     <form action="">
  7.         <select name="elSelect">
  8.             <option value="1">1</option>
  9.             <option value="2">2</option>
  10.             <option value="3">3</option>
  11.         </select>
  12.        
  13.         <input type="hidden" name="fileId" value="12345" />
  14.         <br/>
  15.         <iframe src="fileform.jsp?fileId=12345" style="width: 100%; border: none;"></iframe>
  16.         <br/>
  17.         <input type="submit" value="subir formulario"></input>
  18.     </form>
  19. </body>
  20. </html>

en fileform.jsp
Código HTML:
Ver original
  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>Insert title here</title>
  6.  
  7. <script type="text/javascript">
  8. function submitForm() {
  9.     var form = document.getElementById("fomrId");
  10.     form.submit();
  11. }
  12. </head>
  13. <form method="post" enctype="multipart/form-data" id="fomrId" action="uploadFileServlet.jsp">
  14.     <input type="file" name="elFichero" onchange="submitForm();"></input>
  15.     <input type="hidden" name="fileId" value="<%=request.getParameter("fileId") %>" />
  16. </form>
  17. </body>
  18. </html>

y en uploadFileServlet.jsp (claro que esto lo puse por comodidad, el manejo del fichero se haría de otra manera)
Código HTML:
Ver original
  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>Insert title here</title>
  6. </head>
  7. ARCHIVO CARGADO
  8. </body>
  9. </html>

El sistema es el siguiente:
cuando el usuario selecciona un fichero, este es subido automaticamente en un formulario que está en el iframe, este formulario contiene el fichero y un fileId, en el servidor tienes que poner el fichero como temporal asociado al fileId que mas tarde utilizaras cuando se haga el submit del formulario que tiene el select (el de la primera pagina).
Cuando se haga el submit del primer formulario, éste contendrá el fileId que deberás utilizar para manipular el fichero que se habia subido.

Tienes que tener en cuenta un par de cosas, como por ejemplo si haces el submit del primer formulario antes de que el fichero termine de ser subido
También podes controlar si el usuario quiere cambiar el fichero (gmail tiene un sisema de checkboxes)
Si queres ponerle una barra de progreso la cosa es un poco (solo un poco) mas complicada
Y seguramente mas cosas

A lo mejor no es exactamente lo que necesitas pero creo que te servirá de ayuda
__________________
Hazle un favor a tu cerebro y juega Ajedrez online
Chess online

Última edición por chinanzio; 03/05/2012 a las 17:30
  #7 (permalink)  
Antiguo 04/05/2012, 01:45
 
Fecha de Ingreso: septiembre-2009
Mensajes: 38
Antigüedad: 14 años, 7 meses
Puntos: 0
Respuesta: Subir fichero como parte de un form

Gracias por contestar chinanzo, pero no la solución que me has dado no me es válida.

Es que necesito que el envío, unicamente el envio del formulario sea asíncrono y dentro de ese formulario que esté el fichero. Es que dentro de la servlet que sube el fichero hago un procesamiento del mismo y con la solución que me das, sigue haciendo el procesamiento. Lo que quiero es que lo suba asíncronamente para que en segundo plano me haga el procesamiento.

Gracias
  #8 (permalink)  
Antiguo 04/05/2012, 07:51
 
Fecha de Ingreso: marzo-2007
Mensajes: 82
Antigüedad: 17 años, 1 mes
Puntos: 21
Respuesta: Subir fichero como parte de un form

Hola planets, en donde queres hacer asincrono el proceso ? si queres lo seguimos charlando
__________________
Hazle un favor a tu cerebro y juega Ajedrez online
Chess online

Última edición por chinanzio; 04/05/2012 a las 08:09
  #9 (permalink)  
Antiguo 05/05/2012, 08:56
 
Fecha de Ingreso: septiembre-2009
Mensajes: 38
Antigüedad: 14 años, 7 meses
Puntos: 0
Respuesta: Subir fichero como parte de un form

Hola chinanzio,

Gracias por interesarte, te comentaba que no valía la solución que me planteaste porque, por lo que, he visto tienes un archivo html, que envía la información al iframe (jsp) y éste se comunica con la servlet/php. De este modo, la comunicación es entre la jsp y la servlet, quedándose el código html sin saber nada. (no es así??)

Lo que tengo es un fichero .jsp, el cual tiene un formulario html. Dentro de este, hay campo que es de tipo file.

La solución en la que estaba trabajando era con el plugin de jquery fileupload, pero tampoco consigo aclararme.

Gracias
  #10 (permalink)  
Antiguo 06/05/2012, 07:56
 
Fecha de Ingreso: marzo-2007
Mensajes: 82
Antigüedad: 17 años, 1 mes
Puntos: 21
Respuesta: Subir fichero como parte de un form

dentro del iframe puedes llamar a cualquier función de la página html, por ejemplo cuando empieza a subirse el fichero y cuando termina de subirse, por otro lado mientras el fichero se está subiendo puedes hacer llamadas desde la página html al servidor preguntando por el total del fichero subido hasta el momento. El html no queda aislado , si esto te impedía usar este esquema
Saludos
__________________
Hazle un favor a tu cerebro y juega Ajedrez online
Chess online

Etiquetas: ajax, fichero, formulario, funcion, html, input, jquery, parte
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:47.