Autor
Código:
<!--Aplicación Nº 41 (Galería de Imágenes)
Amplíe el ejercicio de la galería de fotos realizada anteriormente y permita al usuario añadir nuevas fotos.
Para ello hay que poner el atributo enc_type=”multipart/form-data” en el FORM y usar la variable $_FILES['foto'].-->
<?php
/* Leo el numero con el que se guardara el archivo y guardo el numero para el siguiente*/
if (isset($_FILES["foto"]["name"])) {
$file = fopen("./images/photo_index.txt", "r+");
$photoNum = intval(fread($file, filesize("./images/photo_index.txt")));
fwrite($file, strval(++$photoNum));
fclose($file);
$path = "./images/foto$photoNum." . pathinfo($_FILES["foto"]["name"], PATHINFO_EXTENSION);
move_uploaded_file($_FILES["foto"]["tmp_name"], $path);
$tabla = "<tr><td><img src='$path' width='100px' height='100px'></td><td>" . $_POST["descripcion"] . "</tr>";
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
<script type="text/javascript" src="./javascript/functions.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Imagenes</title>
</head>
<body>
<form method="POST" enctype="multipart/form-data" action="index.php">
<fieldset style="width:15em;">
<legend>Agregar nuevas fotos al servidor</legend>
Foto: <input type="file" name="foto" accept="image/jpg,jpeg"><br />
Descripción: <input type="text" name="descripcion" style="width:20em"><br />
<input type="submit" value="Enviar" >
</fieldset>
</form>
<table border="1">
<thead>
<th>Fotos</th>
<th>Descripción</th>
</thead>
<tbody id="1">
<tr>
<td><a href="./original.html"><img src="./images/paisaje1.jpg" width="100px" height="100px" onclick="saveSelectedImg(this)"></a> </td>
<td>Bosque mágico</td>
</tr>
<tr>
<td><a href="./original.html"><img src="./images/paisaje2.jpg" width="100px" height="100px" onclick="saveSelectedImg(this)"></a></td>
<td>Cataratas</td>
</tr>
<tr>
<td><a href="./original.html"><img src="./images/paisaje3.jpg" width="100px" height="100px" onclick="saveSelectedImg(this)"></a></td>
<td>Playa montañosa</td>
</tr>
<tr>
<td><a href="./original.html"><img src="./images/paisaje4.jpg" width="100px" height="100px" onclick="saveSelectedImg(this)"></a></td>
<td>Cascadas</td>
</tr>
<tr>
<td><a href="./original.html"><img src="./images/paisaje5.jpg" width="100px" height="100px" onclick="saveSelectedImg(this)"></a></td>
<td>Pradera</td>
</tr>
<tr>
<td><a href="./original.html"><img src="./images/paisaje6.jpg" width="100px" height="100px" onclick="saveSelectedImg(this)"></a></td>
<td>Pradera otoñal</td>
</tr>
<tr>
<td><a href="./original.html"><img src="./images/paisaje7.jpg" width="100px" height="100px" onclick="saveSelectedImg(this)"></a></td>
<td>Río y cascadas</td>
</tr>
<tr>
<td><a href="./original.html"><img src="./images/paisaje8.jpg" width="100px" height="100px" onclick="saveSelectedImg(this)"></a></td>
<td>Playa mágica</td>
</tr>
<tr>
<td><a href="./original.html"><img src="./images/paisaje9.jpg" width="100px" height="100px" onclick="saveSelectedImg(this)"></a></td>
<td>Perú</td>
</tr>
<tr>
<td><a href="./original.html"><img src="./images/paisaje10.jpg" width="100px" height="100px" onclick="saveSelectedImg(this)"></a></td>
<td>Bosque de otoño</td>
</tr>
<?php
if(isset($_FILES["foto"]) ){
echo $tabla;
}
?>
</tbody>
</thead>
</table>
</body>
</html>
Es un formulario que genera una tabla con imágenes. La parte que me esta complicando es el echo de $tabla que se hace abajo. La idea es que a medida que el usuario cargue fotos ese echo vaya 'concatenando' filas . El problema es que a medida que cargo fotos se van sustituyendo en vez de concatenarse. ¿Como puedo hacer para que el echo vaya concantenando nuevo codigo html?Amplíe el ejercicio de la galería de fotos realizada anteriormente y permita al usuario añadir nuevas fotos.
Para ello hay que poner el atributo enc_type=”multipart/form-data” en el FORM y usar la variable $_FILES['foto'].-->
<?php
/* Leo el numero con el que se guardara el archivo y guardo el numero para el siguiente*/
if (isset($_FILES["foto"]["name"])) {
$file = fopen("./images/photo_index.txt", "r+");
$photoNum = intval(fread($file, filesize("./images/photo_index.txt")));
fwrite($file, strval(++$photoNum));
fclose($file);
$path = "./images/foto$photoNum." . pathinfo($_FILES["foto"]["name"], PATHINFO_EXTENSION);
move_uploaded_file($_FILES["foto"]["tmp_name"], $path);
$tabla = "<tr><td><img src='$path' width='100px' height='100px'></td><td>" . $_POST["descripcion"] . "</tr>";
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
<script type="text/javascript" src="./javascript/functions.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Imagenes</title>
</head>
<body>
<form method="POST" enctype="multipart/form-data" action="index.php">
<fieldset style="width:15em;">
<legend>Agregar nuevas fotos al servidor</legend>
Foto: <input type="file" name="foto" accept="image/jpg,jpeg"><br />
Descripción: <input type="text" name="descripcion" style="width:20em"><br />
<input type="submit" value="Enviar" >
</fieldset>
</form>
<table border="1">
<thead>
<th>Fotos</th>
<th>Descripción</th>
</thead>
<tbody id="1">
<tr>
<td><a href="./original.html"><img src="./images/paisaje1.jpg" width="100px" height="100px" onclick="saveSelectedImg(this)"></a> </td>
<td>Bosque mágico</td>
</tr>
<tr>
<td><a href="./original.html"><img src="./images/paisaje2.jpg" width="100px" height="100px" onclick="saveSelectedImg(this)"></a></td>
<td>Cataratas</td>
</tr>
<tr>
<td><a href="./original.html"><img src="./images/paisaje3.jpg" width="100px" height="100px" onclick="saveSelectedImg(this)"></a></td>
<td>Playa montañosa</td>
</tr>
<tr>
<td><a href="./original.html"><img src="./images/paisaje4.jpg" width="100px" height="100px" onclick="saveSelectedImg(this)"></a></td>
<td>Cascadas</td>
</tr>
<tr>
<td><a href="./original.html"><img src="./images/paisaje5.jpg" width="100px" height="100px" onclick="saveSelectedImg(this)"></a></td>
<td>Pradera</td>
</tr>
<tr>
<td><a href="./original.html"><img src="./images/paisaje6.jpg" width="100px" height="100px" onclick="saveSelectedImg(this)"></a></td>
<td>Pradera otoñal</td>
</tr>
<tr>
<td><a href="./original.html"><img src="./images/paisaje7.jpg" width="100px" height="100px" onclick="saveSelectedImg(this)"></a></td>
<td>Río y cascadas</td>
</tr>
<tr>
<td><a href="./original.html"><img src="./images/paisaje8.jpg" width="100px" height="100px" onclick="saveSelectedImg(this)"></a></td>
<td>Playa mágica</td>
</tr>
<tr>
<td><a href="./original.html"><img src="./images/paisaje9.jpg" width="100px" height="100px" onclick="saveSelectedImg(this)"></a></td>
<td>Perú</td>
</tr>
<tr>
<td><a href="./original.html"><img src="./images/paisaje10.jpg" width="100px" height="100px" onclick="saveSelectedImg(this)"></a></td>
<td>Bosque de otoño</td>
</tr>
<?php
if(isset($_FILES["foto"]) ){
echo $tabla;
}
?>
</tbody>
</thead>
</table>
</body>
</html>
En línea
