issue with image uploading in the front end

Question

i need to implement image upload whereby a thumbnail appears alongside the buttons.. i have implemented it using function "getAsDataURL",... its not working in in chrome and safari.... any solution??

<script type="text/javascript"> function setImage(file) { if(document.all) document.getElementById('prevImage').src = file.value; else document.getElementById('prevImage').src = file.files.item(0).getAsDataURL(); if(document.getElementById('prevImage').src.length > 0) document.getElementById('prevImage').style.display = 'block'; } </script> <div class="uploading_block_inner"> <div class="uploaded_img_inner"><img id="prevImage" style="display:none;" width="91" height="91" /></div> <div class="submit_button_upload"> <div class="upload"><input type="file" id="" name="myImage" onchange="setImage(this);" /></div> </div> <div class="upload_submit_inner"><input type="submit" name="" value="" /></div> </div>

Here is the answer stackoverflow.com/questions/942105/file-data-from-input-element — GillesC
– GillesC, Commented Apr 27, 2012 at 7:42
I think the Mozilla non standard getAsDataURL function has not be accepted (and will be removed from firefox too). — Denys Séguret
– Denys Séguret, Commented Apr 27, 2012 at 7:42

Jack · Accepted Answer · 2012-04-27 10:25:21Z

Assuming you are using jQuery, I have following solution for you.

$(document).ready(function(){ $('input[type=file]').on('change', setImage); }); function setImage(file) { if(document.all) { document.getElementById('prevImage').src = file.value; } else { document.getElementById('prevImage').src = file.files.item(0).getAsDataURL(); } if(document.getElementById('prevImage').src.length > 0) { document.getElementById('prevImage').style.display = 'block'; } }

I added jQuery document ready event handling which was not there in original code

Collectives™ on Stack Overflow

issue with image uploading in the front end

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related