HTML File Image won't show up

Question

I'm trying get basically a preview image and i have been doing some research and followed along on some other peoples code but for some reason my image will not show up can anyone tell me why it will not show up?

HTML Code

<input type="file" accept="image/*;capture=camera" id="myfile" name="myfile">
<output name="image" id="list"> </output>

JavaScript

<script>
function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object, files[0] is your file
    var f = files[0];
    var reader = new FileReader();

    reader.onload = (function(theFile) {
       return function(e) {
           document.getElementById('list').innerHTML = ['<img src="', e.target.result,'" title="', theFile.name, '" width="50" />'].join('');
       };
    })(f);

    reader.readAsDataURL(f);
    }

    document.getElementById('myfile').addEventListener('change', handleFileSelect, false);
    </script>

If someone could tell me what i'm doing wrong it would be greatly appreciated! Thanks

Answer 1

Apparently it matters where you place the javascript. All i had to do to make it work is move the javascript below the output and it works perfectly now!

Answer 2

Your code and looks working fine. Have a look: http://jsbin.com/atekeh

Maybe are you using a browser without the file API?