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
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!