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:
- <script language="javascript">
- var numero = 0;
- function addNewRow()
- {
- // obtenemos acceso a la tabla por su ID
- var TABLE = document.getElementById("tabla");
- // obtenemos acceso a la fila maestra por su ID
- var TROW = document.getElementById("celda");
- // tomamos la celda
- var content = TROW.getElementsByTagName("td");
- // creamos una nueva fila
- var newRow = TABLE.insertRow(-1);
- newRow.className = TROW.attributes['class'].value;
- // creamos una nueva celda
- var newCell = newRow.insertCell(newRow.cells.length)
- // creamos una nueva ID para el examinador
- newID = 'file_' + (++numero);
- // creamos un nuevo control
- txt = '<input type="file" id="' + newID + '" name="files[]" size="40"/>'
- // y lo asignamos a la celda
- newCell.innerHTML = txt
- // aviso ;)
- //alert(txt)
- // creamos una nueva celda
- var newCell = newRow.insertCell(newRow.cells.length)
- // creamos un nuevo campo de descripcion
- txt = '<input type="text" name="description[]" size="40""/>';
- // y lo asignamos a la celda
- newCell.innerHTML = txt
- // creamos una nueva celda
- var newCell = newRow.insertCell(newRow.cells.length)
- // creamos un nuevo boton que eliminara una fila en concreto!
- txt = '<input type="button" name="button[]" value="eliminar" onClick="removeRow(this)"/>';
- // y lo asignamos a la celda
- newCell.innerHTML = txt
- }
- function removeRow(r)
- {
- // recogemos el indice de la fila donde esta situado el boton
- var i = r.parentNode.parentNode.rowIndex;
- // eliminamos esa fila de la tabla utilizando el indice recogido
- document.getElementById("tabla").deleteRow(i);
- }
- function verElementos(evento)
- {
- for (i=0; i<=numero; i++)
- {
- var my_id = "file_" + i;
- var my_file = document.getElementById(my_id);
- alert ("id: " + my_id + " value: " + my_file.value);
- }
- }
- </script>
- <body>
- <?php
- //Preguntamos si nuetro arreglo 'files' fue definido
- //$_FILES es para los input type="file" y $_POST normal para los
- // input type="text" de toda la vida ;)
- if (isset ($_FILES["files"]) && isset ($_POST["description"])) {
- //obtenemos la cantidad de elementos que tiene el arreglo files
- $total = count($_FILES["files"]["name"]);
- // construimos una tabla para presentar los datos
- echo "<table>";
- //este for recorre el arreglo
- //hacemos una impresion tabulada de los datos que recibimos
- for ($i = 0; $i < $total; $i++)
- {
- //con el indice $i, podemos obtener la propiedad que deseemos de cada archivo
- $name = $_FILES["files"]["name"][$i];
- $description = $_POST["description"][$i];
- echo("<tr>");
- echo("<td><b>Archivo: </b>");
- echo($name);
- echo("</td><td width="5px"></td>");
- echo("<td><b>Descripcion: </b>");
- echo($description);
- echo("</td>");
- echo("</tr>");
- }
- // terminamos la construccion de la tabla
- echo "</table>";
- }
- ?>
- <form name="formulario" id="formulario" action="upload_multiple.php" method="post" enctype="multipart/form-data">
- <table border="0" id="tabla" width="90%">
- <tr class="celda">
- <td colspan="3">Pulse [+] para añadir un examinador de archivos<br/>
- Desarrolladores => Pulse [v] para ver el contenido de los examinadores<br/>
- Desarrolladores => Pulse [s] para ejecutar el submit del formulario y recoger las variables con PHP
- </td>
- <td>
- <input type="button" class="boton" value="[+]" onClick="addNewRow(event)" alt="Insertar">
- <input type="button" class="boton" value="[v]" onClick="verElementos(event)" alt="Ver elementos">
- <input type="submit" class="boton" value="[s]" alt="Hacer submit">
- </td>
- </tr>
- <tr id="celda" class="celda">
- <td>
- <input id="file_0" name="files[]" type="file" size="40">
- </td>
- <td>
- <input name="description[]" type="text" size="40""/>
- </td>
- </tr>
- </table>
- </form>
- </body>
Y aquí una demo, que no puede faltar con este tipo de cosas.
Si no te importa haré tu mismo ejemplo pero usando JQuery y no usando tablas.
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!
Ala, ya lo tienes.
Te he dejado en mi blog el trozo que inserta y elimina filas. Espero que te sea útil.
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!