Como subir fotos, imágenes y otros archivos a un servidor web

En ocasiones los que tenemos una página web o blog en la red, tenemos necesidad de un medio que permita a los usuarios subir imágenes o fotos para compartirlas y mostrarlas en nuestro sitio.
Si no disponemos de algún plugin o script donde alojamos la página que lo permita, podemos hacerlo nosotros mismos, no es nada difícil, solo unas sencillas líneas de código como se detalla en esta página.
Siempre siguiendo las reglas de seguridad que se recomiendan para no comprometer la seguridad de nuestro servidor.
Para subir fotos, imágenes o cualquier otro archivo a un servidor web, es necesario el uso de PHP.
Se necesita un formulario en la página que será el que verá el usuario y este cargará un sencillo script que estará en la misma ubicación de la página y contiene el código en PHP que ejecutará la función requerida.

Códigos necesarios para subir archivos al servidor

Formulario que ve y utiliza el usuario

El formulario que se debe impregnado en el código HTML:

<form enctype="multipart/form-data" action="uploader.php" method="POST">
<input name="uploadedfile" type="file" />
<input type="submit" value="Subir archivo" />
</form>

El formulario se verá de la siguiente forma, no funciona solo es una prueba, el ejemplo funcional está al final de esta misma página.

Script que sube los archivos al servidor

El script es un simple archivo de texto guardado con el nombre uploader.php (sin la extensión .txt), puede hacerse con el Bloc de notas de Windows.

$target_path = "uploads/";
$target_path = $target_path . basename( $_FILES['uploadedfile']['name']); 
if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path)) {
    echo "El archivo ".  basename( $_FILES['uploadedfile']['name']). 
    " ha sido subido";
} else{
    echo "Ha ocurrido un error, trate de nuevo!";
}

En el script se emplean las siguientes variables: El script hace referencia a una carpeta de nombre "uploads" la que es necesario crear en el mismo directorio.
Al seleccionar en el formulario cualquier archivo será subido y guardado en la carpeta uploads, entonces se mostrará un mensaje de confirmación que todo ha tenido éxito.
El mensaje puedes modificarlo a tu gusto, pero solo edita lo que está encerrado entre comillas("").
Lógicamente es solo un ejemplo muy elemental, en la práctica no se debe de utilizar, es necesario emplear un script que limite dos aspectos fundamentales:

Código para impedir que suban archivos indeseados al servidor

La solución es utilizar un script donde se filtre los dos aspectos anteriores, en el tendrás que especificar el tamaño y el tipo de los archivos, en este ejemplo se limita los archivos a subir a 200KB y solo se permiten archivos JPG y GIF ya que este script se diseñó para subir fotos o imágenes, pero puedes sustituir el nombre de archivo por el que necesites.

Código para el script uploader.php final

 <?php
$uploadedfileload="true";
$uploadedfile_size=$_FILES['uploadedfile'][size];
echo $_FILES[uploadedfile][name];
if ($_FILES[uploadedfile][size]>200000)
{$msg=$msg."El archivo es mayor que 200KB, debes reduzcirlo antes de subirlo<BR>";
$uploadedfileload="false";}

if (!($_FILES[uploadedfile][type] =="image/pjpeg" OR $_FILES[uploadedfile][type] =="image/gif"))
{$msg=$msg." Tu archivo tiene que ser JPG o GIF. Otros archivos no son permitidos<BR>";
$uploadedfileload="false";}

$file_name=$_FILES[uploadedfile][name];
$add="uploads/$file_name";
if($uploadedfileload=="true"){

if(move_uploaded_file ($_FILES[uploadedfile][tmp_name], $add)){
echo " Ha sido subido satisfactoriamente";
}else{echo "Error al subir el archivo";}

}else{echo $msg;}
?>

Limitar el tamaño de los archivos en el formulario

El tamaño del archivo a subir también se puede limitar en el formulario, para eso solo es necesario agregar una entrada oculta (hidden) con el nombre name="MAX_FILE_SIZE" y el valor value="tamaño en bytes", quedaría de la siguiente forma:

<form enctype="multipart/form-data" action="uploader.php" method="POST">
<input type="hidden" name="MAX_FILE_SIZE" value="200000" />
<input name="uploadedfile" type="file" />
<input type="submit" value="Subir archivo" />
</form>

Mostrar las fotos e imágenes subidas en la página

Por ultimo si deseas que el archivo subido se muestre en la página (solo en este caso que se trata de imágenes) agrega al final del archivo uploader.php las siguientes líneas:

<?php
  echo "<img src='uploads/$file_name' >";
?>

Todo el código en un sola pagina web

También tienes la opción de hacerlo todo en un único archivo, en ese caso la página tiene que tener la extensión PHP.
Elimina en el formulario la referencia al script uploader.php, por lo que quedaría la línea correspondiente de la siguiente forma:

<form enctype="multipart/form-data" action="" method="post">

Ten presente que al usuario usar el formulario, la página se refrescará, por lo que si el formulario se encuentra en un parte que no sea el comienzo, el usuario tendrá que desplazarse hacia su ubicación para ver la imagen subida.
La solución es insertar un identificador en un DIV e incluirlo en el código de la siguiente forma:

<div id="form"></div>
<form enctype="multipart/form-data" action="http://mipagina#form" method="post"> 

Es todo, solo regularmente tendrás que revisar el contenido de la carpeta Uploads.

Códigos de dos páginas de ejemplo

A continuación comparto el código de dos páginas completas, para usar en un servidor web y subir archivos.
En ambos casos la misma página incluye el script, por lo que no es necesario un archivo auxiliar.
El primer código esta creado para subir imágenes JPG o GIF, menores a los 200 KB de tamaño.
No obstante los valores se pueden modificar.

<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Subir archivos al servidor</title>
<meta name ="author" content ="Norfi Carrodeguas">
<style type="text/css" media="screen">
body{font-size:1.2em;}
</style>
</head>
<body>
<form enctype="multipart/form-data" action="" method="POST">
<input name="uploadedfile" type="file">
<input type="submit" value="Subir archivo">
</form> 
<?php
$uploadedfileload="true";
$uploadedfile_size=$_FILES['uploadedfile'][size];
echo $_FILES[uploadedfile][name];
if ($_FILES[uploadedfile][size]>200000)
{$msg=$msg."El archivo es mayor que 200KB, debes reduzcirlo antes de subirlo<BR>";
$uploadedfileload="false";}

if (!($_FILES[uploadedfile][type] =="image/pjpeg" OR $_FILES[uploadedfile][type] =="image/gif" OR $_FILES[uploadedfile][type] =="image/png"))
{$msg=$msg." Tu archivo tiene que ser JPG o GIF. Otros archivos no son permitidos<BR>";
$uploadedfileload="false";}

$file_name=$_FILES[uploadedfile][name];
$add="uploads/$file_name";
if($uploadedfileload=="true"){

if(move_uploaded_file ($_FILES[uploadedfile][tmp_name], $add)){
echo " Ha sido subido satisfactoriamente";
}else{echo "Error al subir el archivo";}

}else{echo $msg;}
?>
</body>
</html>    

El segundo código permite subir cualquier tipo de archivo de cualquier tamaño.
Solo es necesario crear en el mismo directorio una carpeta de nombre "uploads" o cambiar el nombre y la ruta en el código si fuera necesario.

<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Subir archivos al servidor</title>
<meta name ="author" content ="Norfi Carrodeguas">
<style type="text/css" media="screen">
body{font-size:1.2em;}
</style>
</head>
<body>
<form enctype='multipart/form-data' action='' method='post'>
<input name='uploadedfile' type='file'><br>
<input type='submit' value='Subir archivo'>
</form>
<?php 
$target_path = "uploads/";
$target_path = $target_path . basename( $_FILES['uploadedfile']['name']); 
if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path)) 
{ 
echo "<span style='color:green;'>El archivo ". basename( $_FILES['uploadedfile']['name']). " ha sido subido</span><br>";
}else{
echo "Ha ocurrido un error, trate de nuevo!";
} 
?>
</body>
</html>    

Paginas relacionadas

Comparta esta página

Sígueme en las redes sociales