PHP: Previsualizar imagenes antes de subirlas al servidor

Supongamos que tenemos un formulario para subir archivos, que ése archivo es la imagen de nuestro perfil y que queremos ver como queda antes de subir la imagen y guardar nuestro perfil.

Para realizar esta tarea php no va a ir solo, va a estar acompañado por un javascript y un iframe para que esto resulte. pero es más facil de lo que parece. Mi amigo GON me facilitó este código que fuimos adaptando para nuestro trabajo. Veamos los pasos para este ejemplo:

-----------------------------------------------------------------------------------------------------

Si querés los archivos fuete, acá te dejo un link para descargarte los archivos del ejemplo funcionando ok.

-----------------------------------------------------------------------------------------------------

1) Para llevar a cabo este ejemplo vamos a crear en la raíz de nuestro servidor una carpeta llamada "tmp", dos archivos .php llamados "form.php" y "uploader.php" y una imagen genérica llamada "avatar.png" que hará de comodin (puede ser cualquier extensión de imagen).
En la carpeta "tmp" se iran guardando las vistas previas de las imagenes que cargaremos en nuestro escritorio.

2) Archivo "form.php":

• En el header pondremos un script de javascript:
  <script type="text/javascript"> function setpreview() <!-- creamos la función -->
   { document.form1.target='null'; <!-- seteamos el target del formulario en null para que se ejecute dentro del iframe llamado "null"-->
   document.form1.action='uploader.php'; <!-- seteamos la acción del formulario hacia nuestro archivo "uploader.php" -->
   document.form1.submit(); <!-- hacemos el envío de información sin salir de la pantalla del formulario -->
   }
  function setsubmit() <!-- Creamos la función para que el action del formulario vuelva a ser el archivo que procesa los datos -->
  {  document.form1.target='_self'; <!-- le decimos que se ejecute en el lugar de la página actual -->
   document.form1.action='archivo_que_procesa_tu_form'; <!-- aquí ponemos redefinimos el action del formulario para que se dirija al archivo que ejecuta los datos del form -->
  document.form1.submit();  <!-- enviamos la información -->
  } </script>
  
• En el body: pondremos el formulario:
  <form name="form1" action=" " method="post" enctype="multipart/form-data"><!-- El nombre del formulario es el mismo al que llamamos en la funcion javascript, en "action" ponemos el archivo donde irá el formulario una vez completado, pero para este ejemplo no nos importa. No te olvides del "enctype" fundamental para subir archivos -->
  <div>Personalizar tu imagen: </div> <!-- este div es solo para poner una leyenda, no es necesario para que funcione bien el script -->
  <div><input name="archivo" id="archivo" type="file" size="35" onChange="setpreview()"/></div> <!-- campo de archivo donde seleccionamos la imagen de nuestra pc. Aquí le decimos que cuando nuestro campo cambia (onChange) ejecute el código del javascript sin esperar a apretar el boton "submit" del formulario-->
  <div><img src="avatar.png" id="picture" alt="vista previa" height="70" width="70"/> </div> <!-- En este div mostraremos, inicialmente la imagen "avatar.png" pero que, al seleccionar un nuevo archivo en el campo anterior-->
  <div><input type="submit" value="Crear Usuario" onclick="setsubmit()"/></div><!--Cuando presionamos el botón llamamos a la función que devuelve el destino original del action hacia el archivo que procesa los datos del formulario -->
  </form>
  
• También en el body: Escribimos el iframe donde se ejecutará "uploader.php" esto es lo que nos permite ver el preview sin actualizar la página del script.
  <iframe src="about:blank" name="null" style="display:none"> :

3) en el archivo "uploader.php":
<?php
$carpeta="tmp/"; //indicamos la carpeta donde se guardará la vista previa
$name=$carpeta.basename($_FILES['archivo']['name']); //armamos la ruta del archivo subido en formato "tmp/nombredearchivo.png"
 move_uploaded_file($_FILES['archivo']['tmp_name'],$name); //guardamos el archivo en la carpeta
?>

<script type="text/javascript">
 parent.document.getElementById('picture').src='<?php echo $name; ?>'; <!-- Le decimos mediante javascript que, busque el id "picture" (campo que tiene la imagen "avatar" y en su lugar muestre lo que acabamos de subir -->
</script>

4) Cuando crees la función para el botón "enviar" del formulario, en algún lado deberías incluír la sentencia para que se borre, mediante php, la imagen que habíamos subido antes a la carpeta tmp. Algo así como:
<?php
unlink:(tmp/'.$_FILES['archivo']['tmp_name']');
?>


-----------------------------------------------------------------------------------------------------
Nota: Si este artículo te pareció interesante, por favor, visitá los enlaces patrocinados donde seguramente encontrarás más cosas útiles.