How to make a simple image upload using Javascript/HTML

Question

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> 

Answer 1

Here's a simple example with no jQuery. Use URL.createObjectURL, which

creates a DOMString containing a URL representing the object given in the parameter

Then, you can simply set the src of the image to that url:

window.addEventListener('load', function() {   document.querySelector('input[type="file"]').addEventListener('change', function() {       if (this.files && this.files[0]) {           var img = document.querySelector('img');           img.onload = () => {               URL.revokeObjectURL(img.src);  // no longer needed, free memory           }            img.src = URL.createObjectURL(this.files[0]); // set src to blob url       }   }); });

<input type='file' /> <br><img id="myImg" src="#">