Noticias
Entradas
Comentarios
hacker emblem

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:

javascript

  1. <script language="javascript">
  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 = '<input type="file" id="' + newID  + '" name="files[]" size="40"/>'
  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 = '<input type="text" name="description[]" size="40""/>';
  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 = '<input type="button" name="button[]" value="eliminar" onClick="removeRow(this)"/>';
  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<=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. </script>
  1. <body>
  2. <?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"]) && 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 "<table>";      
  12.      
  13.       //este for recorre el arreglo
  14.       //hacemos una impresion tabulada de los datos que recibimos
  15.       for ($i = 0; $i < $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("<tr>");
  21.         echo("<td><b>Archivo: </b>");
  22.         echo($name);
  23.         echo("</td><td width="5px"></td>");
  24.         echo("<td><b>Descripcion: </b>");
  25.         echo($description);
  26.         echo("</td>");
  27.         echo("</tr>");
  28.       }
  29.      
  30.       // terminamos la construccion de la tabla
  31.       echo "</table>";
  32.     }      
  33. ?>
  1. <form name="formulario" id="formulario" action="upload_multiple.php" method="post" enctype="multipart/form-data">
  2. <table border="0" id="tabla" width="90%">
  3. <tr class="celda">
  4. <td colspan="3">Pulse [+] para añadir un examinador de archivos<br/>
  5. Desarrolladores => Pulse [v] para ver el contenido de los examinadores<br/>
  6. Desarrolladores => Pulse [s] para ejecutar el submit del formulario y recoger las variables con PHP
  7. </td>
  8. <td>
  9. <input type="button" class="boton" value="[+]" onClick="addNewRow(event)" alt="Insertar"> 
  10. <input type="button" class="boton" value="[v]" onClick="verElementos(event)" alt="Ver elementos">
  11. <input type="submit" class="boton" value="[s]" alt="Hacer submit">
  12. </td>
  13. </tr>
  14. <tr id="celda" class="celda">
  15. <td>
  16. <input id="file_0" name="files[]" type="file" size="40">
  17. </td>
  18. <td>
  19. <input name="description[]" type="text" size="40""/>
  20. </td>
  21. </tr>
  22. </table>
  23. </form>
  24. </body>

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

A 3 personas les gusta esta entrada

6 Comentarios a “Uploader múltiple de ficheros con Javascript y PHP”

  1. Moisés dice:

    Si no te importa haré tu mismo ejemplo pero usando JQuery y no usando tablas.

  2. neonigma dice:

    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!

  3. Moisés dice:

    Ala, ya lo tienes.

    Te he dejado en mi blog el trozo que inserta y elimina filas. Espero que te sea útil.

  4. neonigma dice:

    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!

  5. What i don’t understood is in reality how you’re not actually much more well-favored than you might be now.
    You are so intelligent. You realize thus considerably in relation to this
    subject, produced me in my view believe it from so many varied
    angles. Its like men and women are not involved unless it is something to accomplish with Woman gaga!
    Your own stuffs excellent. At all times care for
    it up!

  6. Hey there! Quick question that’s totally off topic.
    Do you know how to make your site mobile
    friendly? My weblog looks weird when browsing from my iphone4.
    I’m trying to find a template or plugin that might be able
    to correct this issue. If you have any recommendations, please share.
    Appreciate it!

Dejar un comentario