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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<!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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
<?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:
