NorfiPC » Informaciones de Windows » Como subir fotos, imágenes y otros archivos a un servidor web.

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

Códigos necesarios para crear una forma en una página o blog, mediante la cual los usuarios puedan subir fotos e imágenes a nuestro servidor web para mostrarse en nuestro sitio.

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 plugins 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.

Ejemplos elementales de los códigos necesarios para subir archivos al servidor

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.

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 único archivo

Otra opción es agrupar todo el código en un mismo archivo pero en este caso tiene que tener la extensión PHP la página creada, además hay que eliminar 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">

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

Paginas relacionadas

Lista de variables y funciones de Javascript
Como escribir con Javascript texto y otros elementos en las páginas web
Como imprimir solo un área, parte o sección de una página web
Como escapar y ocultar texto, código HTML y Javascript en páginas web
Javascript fácil en páginas web, tutorial y ejemplos

Agrega esta página a tus favoritas:

Seguir a @NorfiPC
NorfiPC en Google+: