Image doesn't load properly when using FileReader

[Pilerup]

I want to allow user to select image and load that image to the <img> tag instead of the existing image. I use the following code:

     <form id="form"  method="POST" enctype="multipart/form-data">
            <input type='file'  name="fileToUpload" id="fileToUpload" />
     </form>
     <div id="theparent" style="border:1px solid; width:300px;height:300px">
         <img id="thepicture" src="/images/lpreloaded_image.jpg" alt="my image"/>
     </div>

<script>
              function readURL(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();

                    reader.onload = function (e) {
                        $('#thepicture').attr('src', e.target.result);
                    }

                    reader.readAsDataURL(input.files[0]);
                }
            }

            $("#fileToUpload").change(function () {
                readURL(this);
            });
</script>

It loads the image very badly, scale goes crazy and aspect ratio as well, it distorts the image badly

[clarklight]

I am also facing the same issue...

[jonjieviduya]

@matiasgagliano any idea?