Taller Webmaster

Tutoriales para Webmasters

Bienvenido a Taller Webmaster, donde encontrarás la mejor información sobre tutoriales y recursos para webmasters!

Ingreso de Usuario

Recuperar contraseña

Registro de Usuario

Publicidad

Publicar Imagenes en Internet

Tutorial Photoshop

 

Tutorial por Solo Photoshop

SoloPhotoshop

Tutorial Publicar Imagenes en Internet con PHP

Upload de archivos con PHP

por elQuique de Foro Creativo y Taller Webmaster

En esta oportunidad desarrollaremos un Tutorial Básico sobre uno de los temas mas interesantes y a su vez mas solicitados por nuestros usuarios, o sea el poder publicar un archivo de imagen desde nuestro PC a un sitio web.

Si bien esto se puede hacer también con ASP, en esto es mucho mas sencillo utilizar PHP, que es el lenguaje que utilizaremos en este tutorial, la razón de que es mas fácil es que PHP de modo nativo incluye todo lo necesario para tratamiento de archivos e imagenes, en cambio en ASP debemos recurrir a librerías de terceros y en muchos casos de Pago $$, o que no estan instaladas en el hosting, y que si pedimos la instalen algunos soportes no saben hacerlo. Por eso y en esto PHP va adelante ...

Comenzaremos por realizar un sencillo formulario, como sigue:

Para esto bueno, creamos un archivo nuevo que puede ser HTML o en este caso yo voy a preferir un PHP, que llamare publicar.php, se puede crear en cualquier editor de HTML, pero también tengo mi preferencia por DreamWeaver y creo el formulario así:

Insertar, Formulario, Campo de Archivo o como lo muestra la imagen en ingles

Publicar Imagenes en Internet

En la versión 8, también ya nos consulta por la descripción de se campo que se traducirá en un HTML del tipo label, le pondremos el texto "Seleccione un archivo de su disco duro", tal como indica la imagen

Subir imagenes desde el disco duro

Y luego agregamos un botón de Publicar Archivo, haciendo Insertar, Formulario, Botón

El código HTML si lo visualizamos en vista de Código, sera el siguiente:

<form name="form1" enctype="multipart/form-data" method="post" action="publicar.php">
<label>Seleccione un archivo de su disco duro
<input name="archivo" type="file" id="archivo">
</label>
<input type="submit" name="Submit" value="Publicar Archivo">
</form>

Deben notar que el <input name="archivo" type="file" id="archivo"> tiene de nombre justamente "archivo" este es el nombre con que lo identificaremos en nuestro código PHP.

Otra cosa mas que importante es la etiqueta form, que esta así <form name="form1" enctype="multipart/form-data" method="post" action="publicar.php"> ahí debemos notar que tenga el enctype como "multipart/form-data", esto hace que permita subir archivos y es fundamental que este así y en el mismo form es importante también el action que dice "publicar.php", esto indica a cual archivo llamamos al presionar en el botón "Publicar Archivo"

Este seria todo el código de cara a la interfase del usuario, o sea el formulario que pedira seleccionemos un archivo en el disco y permita presionar Publicar para subirlo.

Ahora debemos realizar la parte que se ejecuta cuando PHP toma los datos del formulario y deja el archivo publicado, disponible en nuestro servidor.

Bien, vamos de lleno a esto ... , así como $_POST nos permite obtener los campos de un formulario, el PHP tiene una orden especial para obtener el campo "archivo", o se el que dice Examinar o Browse, esta orden es $_FILES.

$_FILES a su vez tiene varias propiedades que nos informan de cada uno de los elementos de nuestro archivo, estas son: nombre, tipo, tamaño y nombre temporal. Si tenemos en cuenta que el campo browse se llama "archivo", el uso de estas propiedades seria de esta manera:

$_FILES['archivo']['name'] que nos brinda el nombre del archivo recien publicado.

$_FILES['archivo']['size'] que nos brinda el tamaño del archivo recien publicado. El tamaño esta dado en bytes.

$_FILES['archivo']['type'] que nos brinda el tipo del archivo recien publicado. El tipo del archivo esta dado por el mime type, algunos tipos son image/gif, image/jpeg, image/png, etc.

$_FILES['archivo']['tmp_name'] que nos brinda el nombre temporal del archivo recien publicado. Todo archivo cuando se hace "Publicar" en el formulario queda en la carpeta temporal del servidor, por eso es importante esta propiedad.

Sabiendo cual es el comando PHP que nos permite obtener el campo del archivo publicado en el formulario, podemos comenzar con nuestro código PHP, pero antes razonemos que debemos hacer. Por lógica, seria obtener el archivo publicado y ubicarlo en una carpeta accesible de nuestro servidor, ya que no podemos dejarlo en la carpeta temporal. En este punto debemos tener en cuenta algunas cosas importante:

  • conocer el formato de las direcciones de nuestro servidor sea Linux o Windows
  • poder asignarle permisos a esa carpeta para que nuestro código PHP pueda escribir ahí el nuevo archivo
  • conocer como mover el archivo desde la carpeta temporal a la carpeta que hemos creado para tales fines

Vamos por parte, en los servidores Linux, la dirección sera algo del tipo /home/usuario/public_html, el usuario es lo que cambia en cada caso y suele ser el usuario que usas para entrar al FTP de tu sitio. En el caso de windows la dirección puede ser así D:\AppServ\www o C:\var\www, eso debes confirmarlo en tu hosting.

Lo segundo necesario es asignar a la carpeta donde deben quedar los archivos el permiso de escritura, si esta se llama "archivosonline" va a estar ubicada por ejemplo así: /home/usuario/public_html/archivosonline

Para asignarle el permiso debemos ir por nuestro FTP y con botón derecho, propiedades le asignamos el permiso de escritura 777 a la carpeta "archivosonline"

Lo ultimo es conocer, la función PHP, que permite mover un archivo desde la carpeta temporal hasta la carpeta de destino. En este punto otra vez PHP nos la hace bien fácil, ya que tiene un función para tal fin, esta es move_uploaded_file, y funciona así:

move_uploaded_file(archivotemporal, destinofinal)

Bien, con esto tenemos todo para nuestro código PHP, que debe quedar de esta forma:

<?php
move_uploaded_file($_FILES['archivo']['tmp_name'], '/home/usuario/public_html/archivosonline/' . $_FILES['archivo']['name']);
?>

Sencillo no ??, bueno eso es todo. Esta claro que se deberían realizar algunos controles adicionales pero lo dejamos para la segunda parte de este tutorial.

Puedes dejarnos tus comentarios o consultas en nuestro foro, haciendo click aca

Comentarios de Publicar Imagenes en Internet

↑ Tutorial

  • niyaz

    niyaz

    2006-11-19 20:06

    muy buen tutorial y espero la segunda parte.

    saludso y sigan asi
  • paul

    paul

    2006-11-30 14:35

    exelente material!!
  • Artaios

    Artaios

    2007-02-15 11:10

    Muy bien
  • ruke

    ruke

    2007-04-29 20:12

    Muy interesante el tutorial, lo estuve probando y me anda de 10!, pero me gustaría saber como hago, para que el usuario cuando cargue su imagen la pueda ver, y ahí mismo le salga un cuadro de texto en donde le diga, "Link para Foros : http://ejemplo.com/imagendelusuario.JPG", bueno muchas gracias por el tutorial y espero respuestas :D ....
  • crowingjm

    crowingjm

    2007-07-10 14:36

    buenazo gracias
  • betardo

    betardo

    2008-08-02 23:33

    soy nuevo y aqui e encontrado una herramienta exelente en mi desarrollo como diseñador web... sigan sigan asi... gracias