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

resources i used: [HTML 5 Rocks](http://www.html5rocks.com/en/tutorials/file/dndfiles/) [Using HTML5 API](http://www.onlywebpro.com/2012/01/24/create-thumbnail-preview-of-images-using-html5-api/) [Capture Images with with HTML5](http://stackoverflow.com/questions/14281942/captured-images-with-html5-for-mobile-devices) [Native Camera App HTML5](http://stackoverflow.com/questions/7676036/can-you-launch-the-native-camera-app-from-an-html-5-web-app) — Josh C., Apr 17 '13 at 01:13

score 1 · Answer 1 · answered Apr 17 '13 at 01:48

1

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

Maybe are you using a browser without the file API?

answered Apr 17 '13 at 01:48

Mimo

6,015
6
36
46

I kind of thought that same thing but when i use those examples it works just fine. on this same browser...Even your link works! – Josh C. Apr 17 '13 at 02:19

score 0 · Accepted Answer · answered Apr 17 '13 at 02:32

0

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!

answered Apr 17 '13 at 02:32

Josh C.

316
1
4
14

Doesn't really matter where you put the script, in order to work one must is make sure that the document has been loaded. If you wrap the event listener like: window.onload = function() { document.getElementById('myfile').addEventListener('change', handleFileSelect, false); } you can have your functionalities working properly: have a look at the updated jsbin http://jsbin.com/atekeh/3 – Mimo Apr 17 '13 at 04:50

HTML File Image won't show up

2 Answers2