Foros del Web » Programando para Internet » Javascript »

Subir varias imágenes y mostrar un progreso general

Estas en el tema de Subir varias imágenes y mostrar un progreso general en el foro de Javascript en Foros del Web. Hola a todos, estoy intentando crear un formulario en el cual se seleccionen varias imágenes y se muestre una barra de progreso que indique el ...
  #1 (permalink)  
Antiguo 25/05/2014, 10:53
 
Fecha de Ingreso: marzo-2010
Mensajes: 128
Antigüedad: 9 años, 5 meses
Puntos: 3
Pregunta Subir varias imágenes y mostrar un progreso general

Hola a todos, estoy intentando crear un formulario en el cual se seleccionen varias imágenes y se muestre una barra de progreso que indique el estado de la subida. El problema que estoy teniendo es que consigo que las imágenes suban perfectamente al servidor, pero la barra de progreso muestra el progreso individual de cada imagen, no el total de todas. Dejo el código que uso para ver si alguien me puede guiar un poco.

El formulario en HTML

Código html:
Ver original
  1. <form id="upload_form" enctype="multipart/form-data" method="post">
  2.     <input type="file" name="upload[]" id="files" multiple><br>
  3.     <input type="button" value="Upload File" onclick="subirArchivo()">
  4.     <progress id="progressBar" value="0" max="100" style="width: 300px";></progress>
  5.  
  6.     <h3 id="estado"></h3>
  7.     <p id="total"></p>
  8.      <output id="resultado" />
  9.  
  10. </form>

El código Javascript

Código javascript:
Ver original
  1. function subirArchivo() {
  2.  
  3.     var archivos = document.getElementById("files").files;
  4.  
  5.     for(var i = 0; i< archivos.length; i++){
  6.  
  7.      var file = archivos[i];
  8.  
  9.     var formdata = new FormData();
  10.     formdata.append("upload", file);
  11.  
  12.     var ajax = new XMLHttpRequest();
  13.  
  14.     ajax.upload.addEventListener("progress", progreso, false);
  15.     ajax.addEventListener("load", operacion_completada, false);
  16.     ajax.addEventListener("error", mensaje_error, false);
  17.     ajax.addEventListener("abort", abortar_subida, false);
  18.  
  19.     ajax.open("POST", "upload_multiple_mod.php");
  20.     ajax.send(formdata);
  21.     } //fin for
  22. } //fin funcion subir archivo
  23.  
  24.  
  25.  
  26. function progreso(event){
  27.  
  28.     document.getElementById("ltotal").innerHTML = "Subidos "+ event.loaded+" bytes de "+event.total;
  29.  
  30.     var percent = (event.loaded / event.total) * 100;
  31.     document.getElementById("progressBar").value = Math.round(percent);
  32.     document.getElementById("estado").innerHTML =Math.round(percent)+"% subiendo... por favor, espere";
  33.  
  34. } //fin funcion progreso
  35.  
  36.  
  37. function operacion_completada(event) {
  38.  
  39.     document.getElementById("estado").innerHTML = event.target.responseText;
  40.     document.getElementById("progressBar").value = 0;
  41.  
  42. } //fin funcion operacion_completada
  43.  
  44.  
  45.  
  46. function mensaje_error(event) {
  47.     document.getElementById("estado").innerHTML = "Error al subir el archivo";
  48. }//fin funcion mensaje_error
  49.  
  50.  
  51.  
  52. function abortar_subida(event) {
  53.     document.getElementById("estado").innerHTML = "Upload Abort";
  54. } //fin funcion abortar_subida


El PHP en el servidor

Código php:
Ver original
  1. for($i=0; $i<count($_FILES['upload']['name']); $i++) {
  2.  
  3.   $ruta_temporal = $_FILES['upload']['tmp_name'];
  4.  
  5.  
  6.   if ($ruta_temporal != ""){
  7.    
  8.     $nueva_ruta = "uploads/" . $_FILES['upload']['name'];
  9.  
  10.    
  11.     if(move_uploaded_file($ruta_temporal, $nueva_ruta)) {
  12.  
  13.         echo $_FILES['upload']['name']."<br>";
  14.  
  15.     }
  16.  
  17.   }
  18. }


Alguien me puede echar una mano?

Gracias a todos

Última edición por rubiomike; 25/05/2014 a las 11:01
  #2 (permalink)  
Antiguo 08/08/2019, 15:53
Avatar de carlosedu_net  
Fecha de Ingreso: noviembre-2008
Mensajes: 21
Antigüedad: 10 años, 9 meses
Puntos: 0
Respuesta: Subir varias imágenes y mostrar un progreso general

Amigo me puedes pasar ese ejemplo completo para poder probarlo en mi proyecto. Por favor
  #3 (permalink)  
Antiguo 10/08/2019, 21:24
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.942
Antigüedad: 11 años
Puntos: 2181
Respuesta: Subir varias imágenes y mostrar un progreso general

En Javascript tienes un for para ir subiendo cada archivo y necesitarías:

- Antes del for: Crear una variable para almacenar el total de bytes a subir y otra para el total subido

- En la función progreso actualizar el total de bytes subidos y llamar a una función para mostrar el progreso general
__________________
- León, Guanajuato
- GV-Foto



La zona horaria es GMT -6. Ahora son las 22:38.