Progress Bar con Javascript
Necesito ayuda con la etiqueta <progress> a la hora de subir un archivo.
Tengo todo el código necesario para que el archivo se suba correctamente y todo se hace en la misma pagina, ahora, mi duda es hacer funcionar el progress con javascript.
<progress name o id max="" value=""></progress>
Quisiera que javascript recogiera el tamaño total del archivo y se lo asignara a "max" y mientras se sube el archivo el value aumente progresivamente en tiempo real.
1 respuesta
Para que funcione es necesario que utilices alguna librería ajax que permita la subida de archivos.
Si realizas la subida de la forma "tradicional" (por medio de un submit de formulario), lo que lograrás es una recarga completa de tu página, por lo cual el progress no hará el efecto deseado (cuando se actualice la página, en el mejor de los casos estarás con tu archivo ya cargado).
Para realizar esta tarea, te recomiendo que revises la siguiente librería:
http://malsup.com/jquery/form/progress2.html
Independiente a la barra de progreso que tienes ahí, lo interesante es que esta librería te entrega el porcentaje de envío completado. Tomarás ese dato y lo dejarás como variable javascript para que modifique la propiedad "value" de la etiqueta progress, de esta forma cada vez que el javascript de upload tenga una modificación esta se actualice en tu barra de progreso.
Muchas gracias, es justo lo que estaba buscando!!.
Ahora tengo otra duda je je, perdón por las molestias.
Quisiera que ese div este oculto, osea, un display: none; y que cuando empiece la subida se muestre.
no se si en javascript seria así:
// añadir la variable
var progreso = $('.progress');
y luego un:
progreso.style.display='normal';
lo e probado y no me funciona...
Un saludo.
Cuando haces un llamado con $('. Progress'); lo que te retorna es un objeto jquery, lo cual no es una referencia de dom pura. No podrías hacer la moficicación tal cual lo estás haciendo.
Para este caso, te recomiendo que uses los métodos jquery y hagas lo siguiente:
$('.progress').hide();
