How to make a simple image upload using Javascript/HTML

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>

Leave a Comment