Does any one know how to do a simple image upload and display it on the page.
This is what I’m looking for.
- User(me) will choose a image
- The page will display the image without refreshing the page or going to another file.
- multiple
<img src>
will do because I need to display different image size.
This was my code. (Some of it are edited I got it from here )
<style> /* Image Designing Propoerties */ .thumb { height: 75px; border: 1px solid #000; margin: 10px 5px 0 0; } </style> <script type="text/javascript"> /* The uploader form */ $(function () { $(":file").change(function () { if (this.files && this.files[0]) { var reader = new FileReader(); reader.onload = imageIsLoaded; reader.readAsDataURL(this.files[0]); } }); }); function imageIsLoaded(e) { $('#myImg').attr('src', e.target.result); $('#yourImage').attr('src', e.target.result); }; </script> <input type='file' /> </br><img id="myImg" src="#" alt="your image" height=200 width=100>