Problem of resizing an image with jquery

Problem of resizing an image with jquery

Hi,

I am loading an image from my local computer (with an input type="file") :
  1.     $tabContent .= '<form id="form_avatars" action="save_custom_avatar.php" method="post" align="center">';
            $tabContent .= '<div align="center" id="div_avatars">';
                $tabContent .= '<button style="height:100px;width:100px;" disabled id="avatar_button"><img id ="img_avatar" src="../images/icons/user-green-icon.png"/></button>';
            $tabContent .= '</div></br>';
            $tabContent .= '<div align="center" id="div_file">';
            $tabContent .= '</br><input type="file" id="input_file"/>';
            $tabContent .= '</div></br>';
            $tabContent .= '<div align="center" id="div_submit_avatar">';
                $tabContent .= '<input type="submit" id="check_avatars" value="save"/>';
            $tabContent .= '</div>';
        $tabContent .= '</form>';










N.B. the html response code above is generated with PHP

There are scripts that allow the uploaded image to be resized with ratio (if height or width > 90 pixels) and to be viewed in the "avatar_button" button :
  1. $("#input_file").change(function() {
           

        var file = $("#input_file").get(0).files[0];
                var reader = new FileReader();

        reader.onload = function (e) {

            $("#img_avatar").attr("src", e.target.result);

            alert($("#img_avatar").height()+"x"+$("#img_avatar").width());

            if (($("#img_avatar").height()> 90) || ($("#img_avatar").width() > 90))
            {
                if  ($("#img_avatar").height()  > $("#img_avatar").width())
                {
                    alert("vertical !");
                    $("#img_avatar").width(($("#img_avatar").width()*90)/$("#img_avatar").height());
                    $("#img_avatar").height(90);
                }
                else if  ($("#img_avatar").height() < $("#img_avatar").width())
                {
                    alert("horizontal !");
                    $("#img_avatar").height(($("#img_avatar").height()*90)/$("#img_avatar").width());
                    $("#img_avatar").width(90);
                }
                else if  ($("#img_avatar").height() == $("#img_avatar").width())
                {
                    alert("carré !");
                    $("#img_avatar").height(90);
                    $("#img_avatar").width(90);
                }
            }
       
           
                };

          reader.readAsDataURL(file);       

            });








































Here is the scenario :
1. I upload an image (ex : size is 500x300)
2. This 1st image is correctly resized (to 90x54) and shown in the button
3. I upload the 2nd image (ex : size is 200x600)
4. The 2nd image is considered to have the same size as the 1st resized image (90x54 !!), therefore never resized.

I don't understand why, as the scripts work well with the 1st image but not with the others...

Thanks a lot for your help.