Foros del Web - Ver Mensaje Individual

chinanzio · #6 (**permalink**) 03/05/2012, 17:24

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
</head>
<body>
    <form action="">
        <select name="elSelect">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        
        <input type="hidden" name="fileId" value="12345" />
        <br/>
        <iframe src="fileform.jsp?fileId=12345" style="width: 100%; border: none;"></iframe>
        <br/>
        <input type="submit" value="subir formulario"></input>
    </form>
</body>
</html>

en fileform.jsp

Código HTML:

Ver original<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
 
<script type="text/javascript">
function submitForm() {
    var form = document.getElementById("fomrId");
    form.submit();
}
</script>
</head>
<body>
<form method="post" enctype="multipart/form-data" id="fomrId" action="uploadFileServlet.jsp">
    <input type="file" name="elFichero" onchange="submitForm();"></input>
    <input type="hidden" name="fileId" value="<%=request.getParameter("fileId") %>" />
</form>
</body>
</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<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
</head>
<body>
ARCHIVO CARGADO
</body>
</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