CODEWITHSUNDEEP
javascripthtmlhtml5-filesystem
Josh C.
Josh C.

Reputation: 316

HTML File Image won't show up

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

Upvotes: 0

Views: 820

Answers (2)

Josh C.
Josh C.

Reputation: 316

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!

Upvotes: 0

Mimo
Mimo

Reputation: 6075

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

Maybe are you using a browser without the file API?

Upvotes: 1

Related Questions