Cómo crear un formulario web para subir un fichero al servidor (en HTML y PHP) con comprobaciones de tamaño y tipo de fichero. El ejemplo limitará el tamaño del fichero a subir y, como ejemplo, únicamente admitirá ficheros de imagen y de tipo jpg, bmp o png.
- Ejemplo de formulario web HTML para subir un fichero.
- Contenido de ejemplo del fichero subir.php para realizar la subida de un fichero al servidor en PHP.
- Ejemplo de subida de fichero en HTML, CSS, JavaScript y PHP en funcionamiento.
- Descarga de los ficheros HTML y PHP del ejemplo de formulario subida de fichero con límite de tamaño.
Ejemplo de formulario web HTML para subir un fichero
Mostramos el código HTML y CSS de ejemplo de un formulario que muestra un botón para elegir un fichero local y subirlo al servidor. Dicho formulario web incluye un atributo para establecer el límite del tamaño del fichero a subir en 2 Megabytes (2.097.152 bytes). También incluye código JavaScript para mostrar el nombre del fichero a subir.
Copiaremos y pegaremos el siguiente código en el fichero index.html de nuestro sitio web:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo formulario subida fichero con límite de tamaño - ProyectoA</title>
<style>
.subir-fichero {
display: none;
}
.boton {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.boton:hover {
background-color: #45a049;
}
div {
margin:20px;
margin-left: 20px;
margin-right: 20px;
padding: 20px;
border: 1px solid black;
}
</style>
</head>
<body>
<div>
<form action="subir.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="MAX_FILE_SIZE" value="2097152">
<label for="fichero" class="boton">Elegir fichero</label>
<input type="file" id="fichero" name="fichero" class="subir-fichero">
<p id="fichero_elegido"> No ha elegido un fichero. Pulse en "Elegir fichero"</p>
<button type="submit" name="subir_fichero" id="subir_fichero" disabled>Subir</button>
</form>
</div>
<script>
document.getElementById('fichero').addEventListener('change', function ()
{
// Mostrar el nombre del fichero elegido
let nombreFichero = this.files[0] ? this.files[0].name : 'No ha elegido un fichero. Pulse en "Elegir fichero"';
document.getElementById('fichero_elegido').textContent = 'Fichero elegido: ' + nombreFichero;
// Habilitar botón subir si se ha elegido un fichero
const botonSubir = document.getElementById('subir_fichero');
botonSubir.disabled = this.files[0] ? false:true;
});
</script>
</body>
</html>En el ejemplo anterior, el procesamiento de la subida del fichero se realizará desde el fichero subir.php, indicado en action=subir.php. Mostramos el contenido de ejemplo del fichero subir.php a continuación.
El HTML y CSS anterior mostrará un formulario como el siguiente en el navegador web:
Contenido de ejemplo del fichero subir.php para realizar la subida de un fichero al servidor en PHP
Mostramos el código fuente completo del fichero subir.php, que realizará todas las comprobaciones:
- Si el tamaño del fichero es inferior a 2MB.
- Si el fichero es una imagen.
- Si la extensión del fichero es jpg, jpeg, bmp o png.
- Si no existe un fichero con el mismo nombre ya subido.
Si cumple todos los requisitos realizará la subida al servidor, a la carpeta «imagenes» (que debe existir).
Copiaremos y pegaremos el siguiente código PHP en el fichero subir.php que debe estar en la misma carpeta que el fichero index.html anterior:
<?php
$carpetaSubir = "imagenes/";
function mostrarMensaje($mensaje)
{
echo "<script type='text/javascript'>
alert('$mensaje')
window.location = 'https://localhost/subir/'
</script>";
}
// Si se ha pulsado el botón "Subir"
if (isset($_POST["subir_fichero"]))
{
// Comprobamos que se haya elegido un fichero
if (!isset($_FILES["fichero"]["name"]))
{
mostrarMensaje ("No ha elegido un fichero a subir.");
} else
{
$ficheroSubir = $carpetaSubir . basename($_FILES["fichero"]["name"]);
// Si el tamaño del fichero elegido es mayor del permitido en MAX_FILE_SIZE, la siguiente variable estará vacía
if (!isset($_FILES["fichero"]["tmp_name"]) || $_FILES["fichero"]["tmp_name"] == null)
{
mostrarMensaje ("El fichero elegido no cumple los requisitos de tamaño. Elija otro.");
}
else
{
$ficheroTmp = $_FILES["fichero"]["tmp_name"];
$extensionFichero = strtolower(pathinfo($ficheroSubir, PATHINFO_EXTENSION));
// Comprobamos si ya existe el fichero en la carpeta de subida del servidor
if (file_exists($ficheroSubir))
{
mostrarMensaje ("Ya existe un fichero con el mismo nombre subido. Elija otro o cámbiele el nombre.");
} else
{
// Comprobamos que el fichero elegido sea una imagen
//$correcta = getimagesize($_FILES["fichero"]["tmp_name"]);
$infoFichero = getimagesize($ficheroTmp);
if (!$infoFichero)
{
mostrarMensaje ("El fichero elegido no es una imagen. No se subirá.");
} else
{
// Para depurar
//mostrarMensaje ("El fichero es una imagen de tipo " . $infoFichero["mime"] . ".");
// Comprobamos el tamaño del fichero a subir
// No debe exceder los 2MB
if ($_FILES["fichero"]["size"] > 2097152)
{
mostrarMensaje ("El fichero elegido excede los 2MB. Elija un fichero más pequeño.");
} else
{
// Permitimos ficheros jpg, jpeg, png y bmp
if($extensionFichero != "jpg" && $extensionFichero != "png"
&& $extensionFichero != "jpeg" && $extensionFichero != "bmp")
{
mostrarMensaje ("Sólo se admiten ficheros de tipo jpg, jpeg, png o bmp.");
}
else
{
// Puesto que el fichero cumple los requisitos, lo subimos al servidor
if (move_uploaded_file($_FILES["fichero"]["tmp_name"], $ficheroSubir))
{
mostrarMensaje ("El fichero " . htmlspecialchars(basename($_FILES["fichero"]["name"])) .
" ha sido subido correctamente a la web.");
} else
{
mostrarMensaje ("Ha habido algún error y el fichero NO se ha subido.");
}
}
}
}
}
}
}
} else
{
//Puesto que no se ha pulsado el botón "Subir", redireccionamos a index.html
header("Location: index.html");
}
?>Ejemplo de subida de fichero en HTML, CSS, JavaScript y PHP en funcionamiento
Si abrimos el navegador web y accedemos a la URL de nuestro servidor web, nos mostrará el formulario de subida de fichero. Pulsaremos en «Elegir fichero»:
Mostrará una ventana de selección de fichero local a subir. Elegiremos un fichero de imagen y de tamaño inferior a 2MB:
Una vez elegido el fichero pulsaremos en «Subir»:
Si cumple los requisitos se subirá el fichero al servidor web y mostrará el mensaje indicando que el fichero se ha subido correctamente:
El fichero se habrá subido a la carpeta «imagenes» del servidor web Apache o Nginx:
Descarga de los ficheros HTML y PHP del ejemplo de formulario subida de fichero con límite de tamaño
A continuación, mostramos el enlace para la descarga gratuita del código fuente HTML, JavaScript y PHP del ejemplo de formulario de subida de fichero con límite de tamaño y tipo de fichero:
