PHP / HTML | El blog de neonigma

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.

A 3 personas les gusta esta entrada

Estoy trabajando en una empresa de desarrollador Web. Sí. Lo he hecho. Así que me toca enfrentarme a mi querido Javascript. Y lo he hecho haciendo una pequeña página para crear controles de subida de ficheros de forma dinámica, al estilo gmail, pero pulsando en un botoncito.

Sin más os lo dejo, el código está muy comentado así que no es necesario decir mucho más ;).

<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 + '" size="50" />'
// y lo asignamos a la celda
newCell.innerHTML = txt
// aviso ;)
alert(txt)
}
function removeLastRow()
{
// obtenemos la tabla
var TABLE = document.getElementById("tabla");
// si tenemos mas de una fila, borramos
if(TABLE.rows.length > 2)
{
TABLE.deleteRow(TABLE.rows.length-1);
--numero;
}
}
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>
<table border="0" id="tabla" width="100%">
<tr class="celda">
<td colspan="3">Pulse [+] para añadir un examinador de archivos<br/>
Pulse [-] para eliminar un examinador de archivos<br/>
Desarrolladores => Pulse [v] para ver el contenido de los examinadores<br/>
</td>
<td>
<input type="button" class="boton" value="[+]" onClick="addNewRow(event)" alt="Adicionar"> 
<input type="button" class="boton" value="[-]" onClick="removeLastRow(event)" alt="Remover">
<input type="button" class="boton" value="[v]" onClick="verElementos(event)" alt="Ver elementos">
</td>
</tr>
<tr id="celda" class="celda">
<td>
<input id="file_0" name="files" type="file" size="50">
</td>
</tr>
</table>
</body>

Y aquí una demo, que molesta no tenerlas para este tipo de ocasiones.

Más tarde pondré las referencias que he utilizado, que las tengo en favoritos en otro equipo que no está ahora a mi alcance.

A 57 personas les gusta esta entrada

El blog de neonigma

Compartiendo todo lo aprendido

Archivo de la categoría: PHP / HTML

Uploader múltiple de ficheros con Javascript y PHP

Crear tablas dinámicas con Javascript