[SOLUCIONADO] cargar img desde input file

[RicardGTX]

Hola chicos,
no entiendo porque no funciona si meto el script aparte del html. En cambio si esta todo junto si funciona.
Como lo puedo solucionar ???

Aqui os dejo el codigo

html
----------------------------------------------------------------

Código HTML:

<input type="file" id="files" name="files[]" />
<output id="list"></output>
 

js
----------------------------------------------------------------

Código Javascript:

function archivo(evt) {
  var files = evt.target.files; // FileList object
 
  // Obtenemos la imagen del campo "file".
  for (var i = 0, f; f = files[i]; i++) {
    //Solo admitimos imágenes.
    if (!f.type.match('image.*')) {
        continue;
    }
 
    var reader = new FileReader();
 
    reader.onload = (function(theFile) {
        return function(e) {
          // Insertamos la imagen
         document.getElementById("list").innerHTML = ['<img class="thumb" src="', e.target.result,'" title="', escape(theFile.name), '"/>'].join('');
        };
    })(f);
 
    reader.readAsDataURL(f);
  }
}
 
document.getElementById('files').addEventListener('change', archivo, false);
 

saludos
gracias

[Alexis88]

Quizá no estás incluyendo correctamente al archivo JS. Siempre revisa la consola del navegador; si se produce un error, se mostrará el respectivo mensaje.

[RicardGTX]

si, me dice esto:
TypeError: document.getElementById(...) is null
document.getElementById('files').addEventListener( 'change', archivo, false);

pero no entiendo porque.
:S

[Alexis88]

Quizá estás incluyendo al archivo en la cabecera, por lo que termina ejecutándose antes de que carguen los elementos del documento. Eso explica el mensaje que obtienes.

Tienes dos opciones: inserta el archivo al final del documento, justo antes de la etiqueta </body> o encierra la línea de ejecución de la función dentro del siguiente bloque:

Código Javascript:

document.addEventListener("DOMContentLoaded", function(){
    document.getElementById('files').addEventListener('change', archivo, false);
}, false);
 

De esta manera, se ejecutará la instrucción una vez cargado el modelo de objetos del documento.

[RicardGTX]

FUNCIONO !!!!
muchas gracias :)