Ver Mensaje Individual
  #1 (permalink)  
Antiguo 10/08/2014, 13:20
keygen20
 
Fecha de Ingreso: noviembre-2008
Mensajes: 150
Antigüedad: 15 años, 6 meses
Puntos: 1
Pregunta modificacion a codigo javascript sobre un preview de una imagen

muy buenas tardes disculpe.
me encontre un codigo javascript donde se puede mostrar un preview de una imagen subida desde un input file
todo bien me muestra la imagen como la que hay en esta pagina

http://www.marcofbb.com.ar/wp-conten...oad-html5.html

cuando le das "Seleccionar Archivo" me muestra la imagen todo bien.
el problema es que si vuelvo a escojer otro archivo. me empieza a mostrar la otra imagen en lista.
y no yo deseo que no haga eso si no que cambie la que ya esta subida.
aqui esta el codigo. que me funciona bien. pero yo solo que me muestre sola 1 IMAGEN
y me gustaria saber si me pueden ayudar a entender el codigo y modificar. saludos

Código HTML:
Ver original
  1. <input type="file" id="files" name="files"/>
  2. <br>
  3. <output id="list-miniatura"></output>
  4.   function handleFileSelect(evt) {
  5.     var files = evt.target.files; // FileList object
  6.  
  7.     // Loop through the FileList and render image files as thumbnails.
  8.     for (var i = 0, f; f = files[i]; i++) {
  9.  
  10.       // Only process image files.
  11.       if (!f.type.match('image.*')) {
  12.         continue;
  13.       }
  14.  
  15.       var reader = new FileReader();
  16.  
  17.       // Closure to capture the file information.
  18.       reader.onload = (function(theFile) {
  19.         return function(e) {
  20.           // Render thumbnail.
  21.           var span = document.createElement('span');
  22.           span.innerHTML = ['<img class="thumb" src="', e.target.result,'" title="', escape(theFile.name), '"/><br />'].join('');
  23.           document.getElementById('list-miniatura').insertBefore(span, null);
  24.         };
  25.       })(f);
  26.  
  27.       // Read in the image file as a data URL.
  28.       reader.readAsDataURL(f);
  29.     }
  30.   }
  31.  
  32.   document.getElementById('files').addEventListener('change', handleFileSelect, true);

de antemano muchas gracias.!