Ver Mensaje Individual
  #1 (permalink)  
Antiguo 25/05/2014, 10:53
rubiomike
 
Fecha de Ingreso: marzo-2010
Mensajes: 128
Antigüedad: 9 años, 6 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