[SOLUCIONADO] modificacion a codigo javascript sobre un preview de una imagen

[keygen20]

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:

<input type="file" id="files" name="files"/>
<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 = ['<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, true);
</script>
 

de antemano muchas gracias.!

[Alexis88]

En lugar de insertar la nueva imagen, asígnala como nuevo contenido.

Cambia esto:

Código Javascript:

document.getElementById('list-miniatura').insertBefore(span, null);
 

Por esto:

Código Javascript:

document.getElementById('list-miniatura').innerHTML = span.innerHTML;
 

O mejor aún, olvídate de span y realiza la asignación directamente:

Código Javascript:

reader.onload = (function(theFile) {
    return function(e) {
        document.getElementById('list-miniatura').innerHTML = '<img class="thumb" src="' + e.target.result + '" title="' + escape(theFile.name) + '"/><br />';
    };
})(f);
 

Saludos