Si están en Linux y les da un error de permisos
Para cambiar los permisos. En /var/www
sudo chown -R www-data:${USER} html
Entonces, tanto Apache como el usuario podrán “jugar” con archivos
Introducción
¿Cómo se renderiza una página web en mi computadora?
Levantando un servidor local
¿Cómo combinar HTML con PHP?
PHP como preprocesador de HTML
Imprime texto y etiquetas HTML
Condicionales
Ciclos
¿Cómo pasar variables de PHP a JavaScript?
Evita el código espagueti
Refactorizando código espagueti
Manejo de formularios
Cómo obtener una solicitud al servidor con PHP
Envío de un formulario a través de GET
Envío de un formulario a través de POST
Envío de imágenes
Guardando imágenes en el servidor
Tipos de inputs
Otros tipos de inputs
Valida si un formulario ha sido enviado
Sanitizando datos de mi formulario
Validando datos
Proyecto: formulario de contacto
Creando el maquetado
Haciendo la lógica de recepción del formulario
Integrando PHPMailer
Implementando el servidor de correos de Gmail
Conclusión
Es tu turno de poner todo en práctica
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Guardando imágenes en el servidor
14/24Recursos
Aportes 20
Preguntas 5
Ordenar por:
Comparto código con algunas validaciones mencionadas por el buen RetaxMaster.
<?php
$basename = $_FILES["image"]["name"];
$image = $_FILES["image"]["tmp_name"];
$ruta_a_subir = "images/$basename";
$tipo_archivo = $_FILES["image"]["type"];
$error_de_carga = $_FILES["image"]["error"];
$partes_archivo = explode(".",$basename);
$extension_archivo=strtolower(end($partes_archivo));
$extensiones_permitidas=["jpg","png","svg","ico"];
/*
echo "<pre>";
var_dump($_FILES);
var_dump($extension_archivo);
echo "</pre>";
*/
//Validamos si hubo algun error al cargar el archivo
if ($error_de_carga == UPLOAD_ERR_OK)
{
//Validamos que sea un tipo de archivo permitido
if (in_array($extension_archivo,$extensiones_permitidas))
{
//Copiamos la imagen a la carpeta del servidor
if (move_uploaded_file($image, $ruta_a_subir)){
$mensaje = "Imagen subida correctamente";
}else{
$mensaje= "Huston tuvimos un problema - Verifica que tengas permisos para manipular el servidor ";
}
}else{
$mensaje = "Huston tuvimos un problema - Extensión no valida <br>
Extensiones validas (".implode(',', $extensiones_permitidas).")";
}
}else{
$mensaje="¡Ups! algo salio mal - $error_de_carga";
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2><?= $mensaje ?></h2>
<img src="<?= $ruta_a_subir ?>" alt="<?= $basename ?>">
</body>
</html>
No hay caso. No me funciona. No me mueve la imagen a la carpeta y ni siquiera se si la imagen está en esa carpeta temporal ya que tampoco la puedo encontrar :Sweat
😎 Yo aprendiendo a subir archivos desde el Frontend y guardarlos en el Backend.
podemos usar la función getimagesize para validar si lo que se envía es una imagen y no otro tipo de archivo, así evitamos que envíen pdf’s o otro tipo de archivos que no se deberían poder enviar.
Guardar los archivos directamente en el servidor desde el formulario nos deja expuesto a un hackeo https://book.hacktricks.xyz/pentesting-web/file-upload
La solución sería usar servicios como Amazon S3 o Azure Storage, la otra sería guardarlo en una ruta en la que no podamos acceder directamente al archivo, a toda costa debemos evitar la carpeta pública
Pasa saber si el archivo ya existe podemos usar la funcion file_exists https://www.php.net/manual/es/function.file-exists.php
if (file_exists($ruta_subir)){
echo "El archivo ya existe";
}else{
move_uploaded_file($file, $ruta_subir);
}
Cuando se envian archivos al servidor, PHP lo almacenara de forma temporal en un directorio, por lo que es importante que este lo guardemos en una carpeta, de lo contrario este archivo sera eliminado, para esto lo hacemos con la funcion
<?php
move_uploaded_file($nombreTemporal, $rutaConFileName)
?>
Para que no se vuelva a enviar un form y salga esa ventanita de warning debemos hacer uso del POST/ redirect/ GET pattern. Pueden googlearlo :)
<https://en.wikipedia.org/wiki/Post/Redirect/Get#:~:text=Post%2FRedirect%2FGet%20(PRG>,problem%20encountered%20in%20user%20agents.
Para que no se vuelva a enviar un form y salga esa ventanita de warning debemos hacer uso del POST/ redirect/ GET pattern. Pueden googlearlo :)
Auxilio, PHP no puede crear el archivo temporal, aunque no arroja error al respecto. Simplemente es incapaz de crear el archivo temporal y por tanto no puede moverlo.
Lo ideal para cuando manejemos un sistema que permita subir imagenes o archivos, es dar un nombre temporal ya que vemos que si existe un archivo que se llame igual lo sobreescribira.
Un consejo que me dieron y lo aplico siempre en mis desarrollos es: **Nunca confies en tus usuarios**
Basicamemte hagamos las validaciones que sean necesarias dentro de la aplicación.
Para un futuro, las imágenes nunca se guardan en la BD, se guarda solo el nombre que las identifique y el archivo en el servidor.
Estoy muy contento porque he aprendido demasiado, muchas gracias RetaxMaster
php es hermoso y NO ESTA MUERTO
formulario.php
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Envío de Imágenes</title>
</head>
<body>
<form action="server.php" method="post" enctype="multipart/form-data">
<label>Nombre: <input type="text" name="nombre"></label>
<label>Imagen: <input type="file" name="image"></label>
<button type="submit">Mandar formulario</button>
</form>
</body>
</html>
server.php
<?php
$basename = $_FILES["image"]["name"];
$image = $_FILES["image"]["tmp_name"];
$ruta_a_subir = "images/$basename";
move_uploaded_file($image, $ruta_a_subir);
Guardando imágenes en el servidor
Para guardar imágenes en el servidor utilizando PHP, debes seguir estos pasos:
Crear un formulario HTML para cargar la imagen
Crea un formulario en HTML que permita a los usuarios seleccionar y cargar imágenes. Asegúrate de configurar el atributo enctype del formulario como "multipart/form-data" para permitir la carga de archivos.
<form action="procesar.php" method="post" enctype="multipart/form-data">
<input type="file" name="imagen">
<input type="submit" value="Subir imagen">
</form>
Procesar la imagen en PHP
Crea un archivo PHP (por ejemplo, procesar.php) para manejar la imagen cargada. Utiliza la variable superglobal $_FILES para acceder a los detalles de la imagen y luego guárdala en el servidor.
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
if (isset($_FILES['imagen']) && $_FILES['imagen']['error'] === UPLOAD_ERR_OK) {
$nombreArchivo = $_FILES['imagen']['name'];
$rutaTemporal = $_FILES['imagen']['tmp_name'];
// Ruta donde se guardará la imagen en el servidor
$rutaDestino = 'carpeta_destino/' . $nombreArchivo;
// Mover la imagen temporal a la ubicación deseada en el servidor
if (move_uploaded_file($rutaTemporal, $rutaDestino)) {
echo "Imagen subida con éxito: $nombreArchivo";
} else {
echo "Error al subir la imagen.";
}
} else {
echo "Ocurrió un error al cargar la imagen.";
}
} else {
echo "Esta página solo acepta solicitudes POST.";
}
?>
Crear una carpeta para almacenar las imágenes
Crea una carpeta en tu servidor donde deseas almacenar las imágenes. En el ejemplo anterior, se usa 'carpeta_destino/', asegúrate de ajustar esto según tus necesidades.
Asegurarse de que el servidor tenga permisos de escritura
Asegúrate de que la carpeta donde deseas guardar las imágenes tenga los permisos de escritura adecuados para que PHP pueda mover las imágenes cargadas a esa ubicación.
Sanitizar y validar la imagen (opcional pero importante)
Antes de guardar la imagen, asegúrate de que sea un archivo de imagen válido y que cumpla con tus criterios de seguridad. Esto puede incluir verificar el tipo MIME de la imagen, su tamaño, y realizar otras validaciones para prevenir posibles problemas de seguridad.
Mostrar imágenes almacenadas
Una vez que las imágenes están almacenadas en el servidor, puedes mostrarlas en tus páginas web utilizando la etiqueta <img> y proporcionando la ruta adecuada.
Recuerda siempre tomar medidas de seguridad adecuadas al manejar archivos cargados por usuarios para evitar problemas de seguridad como ataques de inyección de código o la ejecución de scripts maliciosos.
Mi código para la clase:
Formulario en HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulario con envío de imágenes y guardado en el servidor</title>
</head>
<body>
<!-- Formulario -->
<form action="server.php" method="post" enctype="multipart/form-data">
<!-- Nombre -->
<label for="nombre">Nombre:</label>
<input type="text" name="nombre" id="nombre" placeholder="Nombre"><br>
<!-- Apellido -->
<label for="apellido">Apellido:</label>
<input type="text" name="apellido" id="apellido" placeholder="Apellido"><br>
<!-- Edad -->
<label for="edad">Edad:</label>
<input type="number" name="edad" id="edad" placeholder="Edad"><br>
<!-- Imagen -->
<label for="edad">Imagen:</label>
<input type="file" name="imagen" id="imagen"><br>
<!-- Envio -->
<input type="submit" value="Enviar">
</form>
</body>
</html>
Servidor PHP
<?php
// Truco para debugear y ver lo que llega por POST
echo "<pre>";
var_dump($_FILES); // Recupera la información que se envía por FILES
echo "</pre>";
// Recuperamos los datos del formulario
$nombre = $_POST['nombre'];
$apellido = $_POST['apellido'];
$edad = $_POST['edad'];
// Recuperamos los datos de la imagen
$nombreImagen = $_FILES['imagen']['name']; // Recuperamos el nombre de la imagen
$tipoArchivo = $_FILES['imagen']['type']; // Recuperamos el tipo de archivo
$tmpImagen = $_FILES['imagen']['tmp_name']; // Recuperamos el nombre temporal de la imagen
// Definir la ruta de almacenamiento de las imágenes
$rutaAlmacenamiento = "imagenes/$nombreImagen";
// Guardamos la imagen en el servidor cambiando su ubicacion temporal a la ruta de almacenamiento
move_uploaded_file($tmpImagen, $rutaAlmacenamiento);
// Mostramos los datos
echo "Hola $nombre $apellido, tienes $edad años, tu imagen es $nombreImagen";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Guardado de imagen en servidor</title>
</head>
<body>
<!-- Mostrar la imagen Guardada -->
<h1>Imagen guardada en el servidor</h1>
<img src="<?= $rutaAlmacenamiento ?>" alt="<?= $nombreImagen ?>">
</body>
</html>
![](
si a alguien les da problemas para guardar la imagen y para mostrarla en la pagina, es porque no tienen los permisos necesarios para ejecutar los programas, vayan a la carpeta subiendo imagenes y denle todos los permisos de lectura escritura y ejecución y así si se puede guardar.
esto me crea una carpeta imagenes y me guarda el archivo en ella, hay que condicionarla a que si la carpeta ya existe, que se salte el paso pero si funciona
$basename = $_FILES["image"]["name"];
$image = $_FILES["image"]["tmp_name"];
mkdir("imagenes");
$ruta_a_subir = "imagenes/$basename";
move_uploaded_file($image, $ruta_a_subir);
Se me ocurre que para la foto de perfil, guardar en la BD la ruta de la imagen y así cuando el usuario inicie sesión, poder recuperar desde la BD, la ruta de su imagen.
La pregunta es, ¿En donde guardar las imágenes para ese caso de uso? En el servidor igual?
Comparto mi apunte de la clase de hoy, añadí la validación de si ya existe el archivo en la carpeta, no lo sobrescriba 😜
Index
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iJCode - Guardando imagenes en el Servidor</title>
</head>
<body>
<!-- Creando Formulario -->
<!-- Cambiando la encriptación del formulario para el envío de imágenes -->
<form action="./server.php" method="post" enctype="multipart/form-data">
<label for="name">Ingresa el nombre</label>
<input type="text" name="name" id="name">
<label for="image">Selecciona la imágen</label>
<input type="file" name="image" id="image">
<button type="submit">Enviar Formulario</button>
</form>
</body>
</html>
Server
<?php
// Obteniendo la información mandada
$name = (isset($_POST['name'])) ? $_POST['name']: 'Sin nombre';
echo("<b>El nombre es: </b>");
echo($name);
echo("<br><b>Los datos de la imágen son:</b>");
echo("<pre>");
var_dump($_FILES);
echo("</pre>");
// Obteniendo la imagen de la carpeta temporal y guardandola en una carpeta dentro del proyecto
$imageTemporal = $_FILES['image']['tmp_name'];
$baseName = $_FILES['image']['name'];
$path = "./images/$baseName";
// Se comprueba, si no existe la imagen en la ruta, se mueve la imagen de la carpeta temporal a la carpeta 'images' dentro del proyecto
if(!(file_exists($path))){
move_uploaded_file($imageTemporal, $path);
}
?>
<!-- Mostrar la imagen -->
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iJCode - Imagen guardada</title>
</head>
<body>
<h1>La imágen guardada es</h1>
<img src="<?= $path ?>" alt="<?= $basename ?>" width="300"/>
</body>
</html>
Resultado
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?