Lo que hace este proyecto es guardar imágenes en una carpeta y mostrar en una tabla toda las imágenes registradas, cada fila muestra una imagen con su respectiva información como el tamaño en KB, el nombre completo, el ancho y la atura. Además, esta validado para que solo pueda aceptar imágenes con formato PNG y JPEG.
Ejercicio.
Crea una carpeta con el nombre img. (2 puntos)
Crea un botón que te permita seleccionar una imagen y otro que te permita guardar la imagen seleccionada en la carpeta creada al inicio, por lo que necesitas especificar la ruta en el código. (10 puntos)
Luego en una tabla listar las imágenes registradas mostrando su peso en KB, nombre completo, el ancho y la atura. (8 puntos)
Posible solución.
En una carpeta creamos los siguientes archivos.
Una carpeta con nombre img, Ejercicio10.php y style.css
Continuamos con el código de cada archivo.
Ejercicio10.php
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" href="style.css"> <link rel="shortcut icon" href="logo.png"> <title>VaidrollTeam</title> </head> <body> <div class="cajafuera"> <br> <h1 align="center"> Subir imágenes </h1> <br> <form action='' method="post" enctype="multipart/form-data"> <input type="file" name="vai_archivo" > <br> <br> <input type="submit" name="submit" class="botonenviar" value="Guardar archivo"> <br> </form> <?php $rutacompleta="img/"; if (isset($_FILES['vai_archivo']) && $_FILES['vai_archivo']['size'] > 0) { $archivo = $_FILES['vai_archivo']['tmp_name']; $nombrearchivo = $_FILES['vai_archivo']['name']; $sizearchivo = $_FILES['vai_archivo']['size']; $tipoarchivo = GetImageSize($archivo); // VaidrollTeam // 1=>'GIF' // 2=>'JPEG' // 3=>'PNG' if ($tipoarchivo[2] == 3 || $tipoarchivo[2] == 2) { if (move_uploaded_file($archivo, $rutacompleta.$nombrearchivo)) { echo "<script> alert(' El archivo se ha cargado con exito.\\n Tamaño de archivo: $sizearchivo bytes.\\n Nombre de imagen: $nombrearchivo.');window.location= 'Ejercicio10.php'</script>"; } else { echo "<script> alert('Error.\\nNo se ha podido cargar el archivo.');window.location='Ejercicio10.php'</script>"; } } else { echo "<script> alert('Error.\\nNo es un archivo JPEG o PNG valido.');window.location='Ejercicio10.php'</script>"; } } $fileimg = opendir($rutacompleta); ?> <table> <tr> <th colspan="5"> <h1>Lista de imágenes</h1> </th> </tr> <tr> <th>Nro</th> <th>Imagen</th> <th>KB</th> <th>Nombre</th> <th>Ancho y Altura</th> </tr> <?php $numerofila = 0; while ($nombre_imagen=readdir($fileimg)) { if ($nombre_imagen != "." && $nombre_imagen != "..") { $sizeimg = GetImageSize($rutacompleta.$nombre_imagen); $archivokb = round((filesize($rutacompleta.$nombre_imagen)/1024),1); // [0] => width="290" // [1] => height="69" // [3] => width="290" height="69" $numerofila++; ?><tr> <td width="5%"><?php echo "$numerofila" ?></td> <td><?php echo "<img width='150' height='150' src='$rutacompleta$nombre_imagen'"?> </td> <td><?php echo "$archivokb"?></td> <td width="40%"><?php echo "$nombre_imagen"?></td> <td><?php echo "Ancho: $sizeimg[0] y altura: $sizeimg[1] "?></td> </tr> <?php } } closedir($fileimg); ?> </div> </body> </html>
style.css
*
{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body
{
margin:0;
padding:0;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
background:#f3f3f3;
}
.cajafuera
{
background:#f3f3f3;
width: 100vw;
height: 50vh;
display: grid;
}
input[type='submit']{
width: auto;
padding: 10px 30px;
cursor: pointer;
display: block;
margin: auto;
border: 0;
outline: none;
border-radius: 10px;
border:1px solid black;
font-size:20px;
color:white;
background-color: #1C62C1;
}
input[type='file']{
width: 30%;
padding: 10px 30px;
cursor: pointer;
display: block;
margin: auto;
border: 0;
outline: none;
border-radius: 10px;
border:1px solid black;
font-size:20px;
color:black;
}
table
{
text-align:center;
width: 80%;
border-collapse: collapse;
border: 1px solid black;
margin:50px auto;
background: white;
}
th
{
background: steelblue;
height: 40px;
font-weight: lighter;
text-shadow: 0 1px 0 #38678f;
color: white;
border: 1px solid #38678f;
box-shadow: inset 0px 1px 2px #568ebd;
transition: all 0.2s;
font-size: 20px;
}
tr
{
border-bottom: 1px solid #cccccc;
width:100%;
}
td
{
border: 1px solid #cccccc;
padding: 10px;
transition: all 0.2s;
font-size: 18px;
}
Resultado.
Debemos de seleccionar una imagen PNG o JPEG, luego presionar en el botón "Guardar Archivo", nos mostrará una ventana con la información de la imagen y confirmar.
Cada fila mostrará una imagen anteriormente registrada en nuestra carpeta IMG con su respectiva información, el tamaño en KB, el nombre completo y sus medidas.
En el caso de que la imagen sea de otro formato simplemente no lo tomará en cuenta.
Listo.
