NorfiPC
NorfiPC » Informaciones » Subir imágenes a un servidor web

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


Compartir en Google Compartir en Facebook Compartir en Twitter Pinear imágenes en Pinterest
Códigos necesarios en HTML y PHP para crear un formulario en una página o blog, mediante el cual los usuarios puedan subir fotos, imágenes u otros archivos a nuestro servidor web, para mostrarse en nuestra página o compartir con otros lectores.
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>
enctype="multipart/form-data": es necesario para subir archivos, crea la forma que permite explorar en su búsqueda en el equipo local.
action="uploader.php": Especifica el script con su ruta que ejecutara la acción.

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:
uploadedfile: Es la referencia al archivo usada en el formulario.
$target_path: Es la ruta a la carpeta donde se almacenarán los archivos.
$_FILES['uploadedfile']['tmp_name']: Archivo subido y guardado de forma temporal por el servidor. Si no es movido a otra ubicación es destruido.
$_FILES['uploadedfile']['name']: Archivo finalmente guardado en la carpeta especificada.
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:
• El tipo de archivo a subir, esto es imprescindible ya que filtrará y solo se subirá el archivo escogido, si no es así pudieran subir un script al servidor que lo dañe.
• El tamaño del archivo a subir, sino se limita podrían congestionar tu servidor al tratar de subir archivos grandes.



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






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.

Descargar archivos


Descarga a continuación usado el siguiente botón un archivo comprimido que contiene en su interior dos archivos en PHP listos, 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 primero de los archivos "upload1.php" esta creado para subir imágenes JPG o GIF, menores a los 200 KB de tamaño.
No obstante los valores se pueden cambiar en el código.
El segundo de los archivos "upload2.php" 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.
Solo pedimos a cambio por descargar los archivos un tweet en Twitter.



Precauciones con los formularios en las páginas web


Es muy importante proteger las entradas de cualquier formulario usado en las páginas de un sitio web.
Al igual que los cuadros de búsquedas pueden ser entradas para atacantes malintencionados.
Después de comprobar que los formularios para subir archivos funcionan, date un tiempo antes de publicarlos para reforzar su seguridad.
Lee en nuestro sitio otro artículo dedicado a la seguridad, principalmente a los ataques usando inyecciones SQL y XSS.
En ella se explica cómo usar Captchas para validar que el usuario no es una máquina y otros recursos para evitar los ataques:
Como proteger los formularios y evitar la inyección de código dañino SQL en PHP

Página protegida con contraseña para subir archivos al servidor


Otra opción para los que necesitan un formulario personal, solo para subir archivos a su sitio y no desean compartirlo con los visitantes, es crear una página o mejor aún un directorio protegido con contraseña, lo que hace casi imposible su uso por un atacante o intruso.
Lee en detalles como hacerlo: Como proteger una página web con contraseña con PHP

Paginas relacionadas



Síguenos en las redes sociales de internet


Norfi Carrodeguas en Google+ Trucos de NorfiPC en Facebook @NorfiPC en Twitter NorfiPC en Pinterest

Buscar en este sitio

 
 
Inicio | Mapa del sitio | Sobre mí | RSS