Uploader múltiple de ficheros con Javascript y PHP

Posted on por

En un post anterior os hablaba de cómo crear un upload múltiple de ficheros en HTML. Ahora rizamos el rizo y lo metemos todo dentro de una página PHP, en la que recogeremos en variables PHP los valores de los elementos que vamos a subir a un hipotético servidor, teniendo así terminado el uploader de ficheros.

Os dejo el código, igualmente comentado:

< View plain text >
javascript

  1. &lt;script language="javascript"&gt;
  2. var numero = 0;
  3.  
  4. function addNewRow()
  5. {
  6.   // obtenemos acceso a la tabla por su ID
  7.   var TABLE = document.getElementById("tabla");
  8.   // obtenemos acceso a la fila maestra por su ID
  9.   var TROW = document.getElementById("celda");
  10.  
  11.   // tomamos la celda
  12.   var content = TROW.getElementsByTagName("td");
  13.  
  14.   // creamos una nueva fila
  15.   var newRow = TABLE.insertRow(-1);
  16.   newRow.className = TROW.attributes['class'].value;
  17.  
  18.   // creamos una nueva celda
  19.   var newCell = newRow.insertCell(newRow.cells.length)
  20.  
  21.   // creamos una nueva ID para el examinador
  22.   newID = 'file_' + (++numero);
  23.  
  24.   // creamos un nuevo control
  25.   txt = '&lt;input type="file" id="' + newID  + '" name="files[]" size="40"/&gt;'
  26.  
  27.   // y lo asignamos a la celda
  28.   newCell.innerHTML = txt
  29.  
  30.   // aviso ;)
  31.   //alert(txt)
  32.  
  33.   // creamos una nueva celda
  34.   var newCell = newRow.insertCell(newRow.cells.length)
  35.  
  36.   // creamos un nuevo campo de descripcion
  37.   txt = '&lt;input type="text" name="description[]" size="40""/&gt;';
  38.  
  39.   // y lo asignamos a la celda
  40.   newCell.innerHTML = txt
  41.  
  42.   // creamos una nueva celda
  43.   var newCell = newRow.insertCell(newRow.cells.length)
  44.  
  45.   // creamos un nuevo boton que eliminara una fila en concreto!
  46.   txt = '&lt;input type="button" name="button[]" value="eliminar" onClick="removeRow(this)"/&gt;';
  47.  
  48.   // y lo asignamos a la celda
  49.   newCell.innerHTML = txt
  50. }
  51.  
  52. function removeRow(r)
  53. {
  54.   // recogemos el indice de la fila donde esta situado el boton
  55.   var i = r.parentNode.parentNode.rowIndex;
  56.  
  57.   // eliminamos esa fila de la tabla utilizando el indice recogido
  58.   document.getElementById("tabla").deleteRow(i);  
  59. }
  60.  
  61. function verElementos(evento)
  62. {
  63.   for (i=0; i&lt;=numero; i++)
  64.   {
  65.     var my_id = "file_" + i;
  66.     var my_file = document.getElementById(my_id);
  67.     alert ("id: " + my_id + " value: " + my_file.value);
  68.   }
  69. }
  70. &lt;/script&gt;
< View plain text >
php

  1. &lt;body&gt;
  2. &lt;?php
  3.    //Preguntamos si nuetro arreglo 'files' fue definido
  4.    //$_FILES es para los input type="file" y $_POST normal para los
  5.    // input type="text" de toda la vida ;)
  6.     if (isset ($_FILES["files"]) &amp;&amp; isset ($_POST["description"])) {
  7.       //obtenemos la cantidad de elementos que tiene el arreglo files
  8.       $total = count($_FILES["files"]["name"]);
  9.  
  10.       // construimos una tabla para presentar los datos      
  11.       echo "&lt;table&gt;";      
  12.      
  13.       //este for recorre el arreglo
  14.       //hacemos una impresion tabulada de los datos que recibimos
  15.       for ($i = 0; $i &lt; $total; $i++)
  16.       {
  17.         //con el indice $i, podemos obtener la propiedad que deseemos de cada archivo
  18.         $name = $_FILES["files"]["name"][$i];
  19.         $description = $_POST["description"][$i];
  20.         echo("&lt;tr&gt;");
  21.         echo("&lt;td&gt;&lt;b&gt;Archivo: &lt;/b&gt;");
  22.         echo($name);
  23.         echo("&lt;/td&gt;&lt;td width="5px"&gt;&lt;/td&gt;");
  24.         echo("&lt;td&gt;&lt;b&gt;Descripcion: &lt;/b&gt;");
  25.         echo($description);
  26.         echo("&lt;/td&gt;");
  27.         echo("&lt;/tr&gt;");
  28.       }
  29.      
  30.       // terminamos la construccion de la tabla
  31.       echo "&lt;/table&gt;";
  32.     }      
  33. ?&gt;
< View plain text >
HTML

  1. &lt;form name="formulario" id="formulario" action="upload_multiple.php" method="post" enctype="multipart/form-data"&gt;
  2. &lt;table border="0" id="tabla" width="90%"&gt;
  3. &lt;tr class="celda"&gt;
  4. &lt;td colspan="3"&gt;Pulse [+] para añadir un examinador de archivos&lt;br/&gt;
  5. Desarrolladores =&gt; Pulse [v] para ver el contenido de los examinadores&lt;br/&gt;
  6. Desarrolladores =&gt; Pulse [s] para ejecutar el submit del formulario y recoger las variables con PHP
  7. &lt;/td&gt;
  8. &lt;td&gt;
  9. &lt;input type="button" class="boton" value="[+]" onClick="addNewRow(event)" alt="Insertar"&gt;&nbsp;
  10. &lt;input type="button" class="boton" value="[v]" onClick="verElementos(event)" alt="Ver elementos"&gt;
  11. &lt;input type="submit" class="boton" value="[s]" alt="Hacer submit"&gt;
  12. &lt;/td&gt;
  13. &lt;/tr&gt;
  14. &lt;tr id="celda" class="celda"&gt;
  15. &lt;td&gt;
  16. &lt;input id="file_0" name="files[]" type="file" size="40"&gt;
  17. &lt;/td&gt;
  18. &lt;td&gt;
  19. &lt;input name="description[]" type="text" size="40""/&gt;
  20. &lt;/td&gt;
  21. &lt;/tr&gt;
  22. &lt;/table&gt;
  23. &lt;/form&gt;
  24. &lt;/body&gt;

Y aquí una demo, que no puede faltar con este tipo de cosas.

A 3 personas les gusta esta entrada

4 pensamientos en “Uploader múltiple de ficheros con Javascript y PHP”

  2. Si no te importa, compártelo, que no sé JQuery y me gustaría ver como va el tema, me han dicho que es potentísimo pero no tengo mucho tiempo de ponerme a mirarlo.
    Gracias por adelantado Moisés!

  4. Gracias tio!!!! Ya le he echado un vistazo, pero lo estudiaré más detenidamente el lunes en el curro! Ya si tengo dudas te pongo un comentario.

    Un saludo!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *