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

7 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. I think everything said made a bunch of sense. However, what about this?
    what if you added a little content? I ain’t saying your information isn’t solid,
    however what if you added something to maybe get people’s attention? I mean Uploader múltiple de ficheros con Javascript
    y PHP | El blog de neonigma is kinda vanilla. You might glance at Yahoo’s front page and note how they create post titles to grab viewers to
    click. You might add a video or a related pic or two
    to grab people interested about everything’ve written. In my opinion, it could make your
    website a little bit more interesting.

  6. Nice weblog right here! Also your site a lot up fast!

    What web host are you the usage of? Can I am getting your associate hyperlink in your host?
    I want my site loaded up as fast as yours lol

  7. Wonderful post! We will be linking to this particularly great article on our site.
    Keep up the great writing.

Dejar un comentario