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.

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

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

Posts Relacionados

Marcofbb Noticias y Artículos Webmasters