Blog Reacción Estudio

¡Tu zona de aprendizaje!

Subir imagen y poner la url en el formulario con PHP y Javascript

Les voy a enseñar como podemos subir una imagen a nuestro servidor y poner la dirección de esta imagen en un campo de texto de nuestro formulario sin la necesidad de recargar la página. Para subir la imagen usamos PHP, y para poner la dirección de la imagen en el formulario usamos Javascript.

Primero, en el archivo donde tenemos nuestro formulario tenemos que poner el siguiente código javascript para poder crear un popup desde donde subiremos la imagen.

<SCRIPT LANGUAGE="JavaScript">
function popUp(URL) {
	day = new Date();
	id = day.getTime();
	eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=1,statusbar=1,menubar=0,resizable=0,width=500,height=500,left = 710,top = 290');");
}
</script>

Luego en nuestro formulario debe haber un campo de imagen tipo «text» con la id «img», además de crear el popup hacia el archivo que va a subir la imagen que crearemos a continuación.

Imagen: <input type="text" id="img"/> 
<a href="javascript:popUp('subir_imagen.php');">[ Subir imagen ]</a>

subir_imagen.php (Código completo del archivo)

<?php
	if(!isset($_POST['enviar'])){
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Subir imagen</title>
</head>

<body>
<form method='post' action='?subida' enctype='multipart/form-data'>
<table width="100%" border="0" cellspacing="10">
  <tr> 
    <td align="center"><h1 style="text-align:center;">Subir imagen</h1></td>
  </tr>
<tr>
  <td align="center">Selecciona la imagen<br /><input name="img1" type="file" /></td>
  </tr>

  <tr>
    <td align="center">&nbsp;</td>
  </tr>
  <tr>
    <td align="center" ><input name='enviar' type='submit' value='Subir' />
</td>
    </tr>
</table>
</form>
<?php
   }else{
	//SUBIMOS LA IMAGEN
	if (is_uploaded_file($HTTP_POST_FILES['img1']['tmp_name'])){
	//recojo la imagen
	$imagen = $HTTP_POST_FILES['img1']['name'];
	//Obtengo el nombre de la imagen y la extensión de la foto
	$imagen1 = explode(".",$imagen);
	if(($imagen1[1] == "jpg") || ($imagen1[1] == "png")){
	        //Genero un nombre aleatorio con números y se asigno la extensión obtenida anteriormente
	        $imagen2 = rand(0,9).rand(100,9999).rand(100,9999).".".$imagen1[1];
		//Coloco la imagen en la carpeta correspondiente con el nuevo nombre
		move_uploaded_file($HTTP_POST_FILES['img1']['tmp_name'], "../nuestro_directorio/".$imagen2);
		//Asigno a la foto permisos
		$ruta="../nuestro_directorio/".$imagen2;
		chmod($ruta,0777);
                //MANDAMOS LA URL AL FORMULARIO
		echo "<script>
			window.opener.document.getElementById('img').value = 'http://www.nuestraweb.com/".$imagen2."';
		        alert('Imagen subida correctamente');
			window.close();
			</script>";
		}else{
			echo "<br><br><p align='center'><span style='color:red;font-size:28px;'>Solo se permiten fotograf&iacute;as .jpg y .png</span></p>";
			echo "<p align='center'><a href='subir_imagenes.php'><span style='font-size:28px;'>Volver atr&aacute;s</span></a></p>";
		}
	}			
}
?></center>
</body>
</html>

Con esto ya nos funciona corrrectamente, pero vamos a explicar el código de subir_imagen.php.

Al principio muestra un formulario para subir la imagen, luego procesa la imagen, y aquí es donde debemos prestar atención:

Linea 38 / subir_imagen.php

if(($imagen1[1] == "jpg") || ($imagen1[1] == "png")){

En esta línea podemos ver las extensiones de las imágenes que admitimos, podemos añadir más extensiones o quitarlas.

Linea 41-44 / subir_imagen.php

//Coloco la imagen en la carpeta correspondiente con el nuevo nombre
move_uploaded_file($HTTP_POST_FILES['img1']['tmp_name'], "../nuestro_directorio/".$imagen2);
//Asigno a la foto permisos
$ruta="../nuestro_directorio/".$imagen2;

Aquí tenemos que poner la ruta donde se subirá la imagen, podemos poner rutas relativas o absolutas de nuestro servidor (ej: /home/miweb/imagenes_subidas/), pero siempre con la variable $imagen2 detrás, que es la que contiene el nombre y extensión de la imagen subida.

Ejemplo usando la url absoluta de nuestro servidor:

//Coloco la imagen en la carpeta correspondiente con el nuevo nombre
move_uploaded_file($HTTP_POST_FILES['img1']['tmp_name'], "/home/miweb/imagenes_subidas/".$imagen2);
//Asigno a la foto permisos
$ruta="/home/miweb/imagenes_subidas/".$imagen2;

Después de esto el script sube la imagen a nuestro directorio y ejecuta el siguiente javascript (línea 47), que es el encargado de poner la dirección de la imagen que hemos subido en nuestro formulario:

//MANDAMOS LA URL AL FORMULARIO
<script>
    window.opener.document.getElementById('img').value = 'http://www.nuestraweb.com/".$imagen2."'; //Pone la url en nuestro formulario
    alert('Imagen subida correctamente'); //Muestra una alerta
    window.close(); //Cierra el popup
</script>

En la primera línea del javascript, tenemos que poner la dirección absoluta del directorio donde subimos las imágenes junto con la variable $imagen2 que contiene la imagen.

Así sería un ejemplo:

    window.opener.document.getElementById('img').value = 'http://www.reaccionestudio.com/imagenes_subidas/".$imagen2."';

Esto es todo amigos. Para cualquier duda tan sólo comenten en esta entrada.