Subir imágenes al servidor con PHP

php

Este tutorial pretende ser una guía – muy – básica para subir imágenes al servidor utilizando un formulario HTML y PHP. Para ello, utilizaremos una pequeña clase de PHP que he programado que nos permitirá subir imágenes fácilmente. Sin más preambulo, manos a la masa…

Primero debemos entender la lógica

Cuando enviamos un archivo a través de un formulario HTML estamos indicándole al navegador que debe enviar, junto con la información delformulario, el archivo. Esto puede significar que el envío tarde un poco más de lo normal, ya que dependerá del peso del archivo que se esté «subiendo» al servidor. Luego, el servidor recibe la información del formulario (incluyendo el archivo) y a través de algún lenguaje de servidor, como PHP, es capaz de hacer algo con ella. Si no existe un lenguaje de servidor que haga algo con ella, la información se envía, pero luego se pierde. Algo así como jugar pin-pon solo.

Requeriremos, entonces, de una programación en algún lenguaje como PHP que le diga al servidor qué hacer con la información que se recibió por el formulario.

Veamos nuestro formulario HTML

Nada complejo, un archivo HTML con un formulario y un campo file dentro de éste. Asegúrense de que el enctype esté asignado en multipart/form-data y que el método está asignado en POST. Agreguemos también un botón submit para enviar el formulario. Podemos restringir el tamaño del archivo si incluimos un campo hidden llamado MAX_FILE_SIZE, así que lo incluiremos, pero también realizaremos luego una comprobación con PHP, ya que este campo por sí mismo no basta. Nótese que este campo debe estar ANTES del campo del archivo y que la ventaja de utilizarlo es que permite indicarle al usuario que el archivo es muy pesado antes de que se envíe. Sin embargo, no funciona siempre, ya que es «fácil» falsearlo. El tamaño está expresado en bytes, en este caso, 2000000 bytes o 2MB.

Creemos un nuevo documento y llamémoslo subirImg.php y en él creemos el siguiente formulario:

<form id=»subirImg» name=»subirImg» enctype=»multipart/form-data» method=»post» action=»»>

<label for=»imagen»>Subir imagen:</label>

<input type=»hidden» name=»MAX_FILE_SIZE» value=»2000000″ />

<input type=»file» name=»imagen» id=»imagen» />

<input type=»submit» name=»subirBtn» id=»subirBtn» value=»Subir imagen» />

</form>

Con esto ya tenemos un formulario que nos permitirá subir una imagen al servidor. Ahora debemos indicarle al servidor qué hacer con la información enviada.

Entonces, veamos ahora el PHP

Lo primero que debemos entender es que a pesar de que enviamos la información a través del método POST, recogeremos la información del archivo con la variable global $_FILES. Esto nos permite tener mucho mayor control sobre el/los archivos subidos y nos entrega mucha más información respecto de lo que sucede con la subida como también sobre el archivo mismo.

El proceso es el siguiente:

  • Primero identificamos que se envió la información del formulario.
  • Luego, verificamos que la imagen cumpla con nuestros requisitos de tamaño, peso y formato.
  • De ser así, la copiamos a la ubicación que deseamos, teniendo en cuenta que dicha ubicación debe tener permisos de escritura de manera tal que PHP pueda crear la imagen en ese destino.

Entonces, para identificar que la información se envió desde el formulario creemos, en la parte superior del documento, el siguiente código PHP:

<?

if ($_POST[‘subirBtn’]) {

}

?>

Ésto nos permitirá identificar si la información del formulario se envió, al verificar que el botón subirBtn tenga algún valor. Ya sabemos entonces que el formulario se envió, ahora verifiquemos si el archivo subido es del tipo imagen. Para este caso, aceptaremos sólo archivos JPG. Esto lo podemos hacer preguntando por el valor de la variable type del arreglo $_FILES. Pongamos el siguiente código dentro del if anterior:

if ($_FILES[‘imagen’][‘type’] == «image/jpeg») {

}

Ahora, verifiquemos si el peso del archivo es correcto. Para ello, utilizaremos la variable size del arreglo$_FILES y la compararemos para ver si es menor o igual que 2000000 . Entonces agreguemos dentro del if anterior el siguiente código:

if ($_FILES[‘imagen’][‘size’] <= 2000000) {

}

Entonces, si todo esto es correcto, copiemos la imagen. Esto lo podemos realizar con la función copy() de PHPde la siguiente forma:

copy($_FILES[‘imagen’][‘tmp_name’], «nuevaImagen.jpg»);

Esto le indica que copie la imagen que está almacenada en tmp_name y que la copie como nuevaImagen.jpgen el mismo directorio donde se encuentra el archivo PHP. Hay que entender que tmp_name es la variable que almacena el nombre temporal del archivo que se subió y que una vez que la copiemos, se eliminará. Entonces nuestro código se ve así:

<?

if ($_POST[‘subirBtn’]) {

if ($_FILES[‘imagen’][‘type’] == «image/jpeg») {

if ($_FILES[‘imagen’][‘size’] <= 2000000) {

copy($_FILES[‘imagen’][‘tmp_name’], «nuevaImagen.jpg»);

}

}

}

?>

Con esto ya podemos copiar una imagen al servidor. Sin embargo, esta no es la mejor forma de realizarlo, por diversas razones:

  • No nos permite determinar el tamaño de la nueva imagen
  • El nombre es siempre el mismo, por lo que reemplazaríamos la misma imagen al subir otra
  • Hay muy poco control sobre el tipo de archivos que aceptaremos

Utilizar la clase imgUpldr

Ahora que ya entendemos la lógica detrás del proceso, utilicemos una clase más avanzada que he programado para subir los archivos. Ésta la encontraremos en el archivo llamado class_imgUpldr.php que está disponible para descargar en el vínculo más abajo. Luego simplemente incluiremos ese archivo en nuestros documentos.

Veamos cómo utilizar la clase. Primero, debemos incluir el archivo que la contiene. Para ello, eliminaré el código anterior dejando sólo la comprobación de que se enviaron los datos del formulario. Luego, incluiré el archivo de la siguiente forma:

<?

if ($_POST[‘subirBtn’]) {

include_once(«class_imgUpldr.php»);

}

?>

Ahora debemos crear una instancia de la clase. En este caso, mi clase se llama imgUpldr. Entonces, crearé una instancia de ella en la línea que sigue al include_once de la siguiente forma:

$subir = new imgUpldr;

Ahora que ya tenemos la clase instanciada, podemos indicarle cuál es la imagen que debe subir. En nuestro caso, debe subir la imagen del campo de formulario que se llama imagen, y se lo indicamos con $_FILES. Esto lo hacemos, en la próxima línea, así:

$subir->init($_FILES[‘imagen’]);

Y con esto, ya subimos la imagen! Veamos cómo debe quedar nuestro código:

<?

if ($_POST[‘subirBtn’]) {

include_once(«class_imgUpldr.php»);

$subir= new imgUpldr;

$subir->init($_FILES[‘imagen’]);

}

?>

Configuraciones de la Clase imgUpldr

La clase permite indicarle un ancho y alto máximos para las imágenes, redimensionar la imagen si es más grande que dicho tamaño. Además, le asigna un nombre según la fecha de subida. También permite indicarle qué tipos de archivo son soportados, y también el peso máximo permitido y la ruta donde queremos almacenarlas. Todos estos parámetros los podemos configurar antes de inicializarla. Es decir, antes del método init(). Los parámetros que podemos modificar son:

  • Ancho: $subir->_width = 200; // El ancho máximo. Si es mayor, se ajustará
  • Alto: $subir->_height = 200; // El alto máximo. Si es mayor, se ajustará
  • Peso: $subir->_size = 200000; // Asignado en bytes
  • Directorio: $subir->_dest = «imgs/»; // Deben incluir el slash al final. Si no existe el directorio, la clase lo creará.
  • Nombre: $subir->_name = «nombre_asignado.jpg»; // Debe incluir la extensión
  • Tipos de archivo: $subir->_exts = array(«image/jpeg», «image/png»); // Arreglo, acepta valores «image/jpeg», «image/gif», «image/png»

También pueden ver los mensajes de error o éxito si hacen un echo de $subir->init();

Pues bien. Espero les sirva!

[wpdm_file id=6 title=»true» ]

Deja una respuesta