Marcofbb Noticias y Artículos Webmasters



Publicidad marcored

Preview de imagen a subir HTML5

  • 27/08/2012
  • 2:21 am
  • marcofbb

Para crear una vista previa de una imagen que vamos a subir mediante un upload de imagenes, vamos a utilizar la API de archivos. Esta API nos servirá para restringir tamaño y formato de un archivo, todo del lado del cliente, obviamente del lado del servidor también hay que hacer las restricciones para que sea seguro. Lo utilizado acá es mas para el lado del diseño, ya que el usuario puede editar el código para saltear las trabas de seguridad dadas.

HTML5 Upload Drop and Drag

Drag and Drop

Este código es para arrastrar la imagen al box, y automáticamente aparezca ya lista para ser subida al servidor.

<style>
  .thumb {
    height: 75px;
    border: 1px solid #000;
    margin: 10px 5px 0 0;
  }
  #drop_zone{
	  border: #000 1px dashed;
	  width:300px;
	  height:100px;
  }
</style>
<div id="drop_zone"><br /><center>Soltar archivo aqui</center></div><br />
<output id="list-miniatura"></output>
<script>
  function handleFileSelect(evt) {
    evt.stopPropagation();
    evt.preventDefault();
 
    var files = evt.dataTransfer.files; // FileList object.
    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
      var reader = new FileReader();
 
      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = ['Nombre: ', escape(theFile.name), ' || Tamanio: ', escape(theFile.size), ' bytes || type: ', escape(theFile.type), '<br /><img class="thumb" src="', e.target.result,'" title="', escape(theFile.name), '"/><br />'].join('');
          document.getElementById('list-miniatura').insertBefore(span, null);
        };
      })(f);
 
      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
    document.getElementById('list-datos').innerHTML = '<ul>' + output.join('') + '</ul>';
  }
 
  function handleDragOver(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
  }
 
  // Setup the dnd listeners.
  var dropZone = document.getElementById('drop_zone');
  dropZone.addEventListener('dragover', handleDragOver, false);
  dropZone.addEventListener('drop', handleFileSelect, false);
</script>

Sistema común

No todo diseño tiene tamaño para un drop and drag, por eso también pongo con este sistema, el predeterminado, o que hoy en día ustedes pueden arrastrar uno o mas archivos dentro del input y los detecta a todos.

<style>
  .thumb {
    height: 75px;
    border: 1px solid #000;
    margin: 10px 5px 0 0;
  }
</style>
<input type="file" id="files" name="files[]" multiple /><br />
<output id="list-miniatura"></output>
<script>
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object
 
    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {
 
      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }
 
      var reader = new FileReader();
 
      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = ['Nombre: ', escape(theFile.name), ' || Tamanio: ', escape(theFile.size), ' bytes || type: ', escape(theFile.type), '<br /><img class="thumb" src="', e.target.result,'" title="', escape(theFile.name), '"/><br />'].join('');
          document.getElementById('list-miniatura').insertBefore(span, null);
        };
      })(f);
 
      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }
 
  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

Fuente: http://www.html5rocks.com/es/tutorials/file/dndfiles/

Demo: Click aquí para ver la demostración

Share

¿Necesitas ayuda? o ¿Asesoramiento webmaster? Registrate en nuestro foro de consultas

Posts Relacionados

Total de Comentarios: 6

Avatar
02/05/2013
10:04 pm

Me sirvió mucho tu ejemplo, muchas gracias espero mas de tus publicaciones.

Avatar
belinda
09/05/2013
12:18 pm

hola!!!
muchas gracias por este post fue de mucha utiliada

y sin no fuera mucho pedir... me gustaria saber si me pudires orientar para que las imagenes se visualicen en el lugar que yo deseo y no solo en forma de lista, quiza que sean 2 filas x 3 columnas....

espero tu respuesda 🙂 gracias

Avatar
Alex
28/07/2013
7:16 pm

Muy bueno gracias,
tengo problemas con el drop_zone para leer los archivos con PHP, no los veo por ningun lado.
Los cargados con el imput, no me dan problemas es solo los subidos a traves del drop_zone.
Que sera?

Avatar
Gerardo
22/01/2014
3:34 pm

Muchas gracias por el aporte 🙂

Avatar
jaime
03/04/2014
3:41 pm

holame gusto mucho tu pos pero si quiero que la imagen se guarde en una carpeta dentro de mi sitio web comole hago gracias

Avatar
Carlos
25/05/2014
4:50 pm

Muy Bueno el ejemplo, pero me gustaria saber como hacer para remover las imagenes a través de un link o algo asi en cada una de ellas.


Enviar Comentario

(*)

(*)