jquery ui - Basic jQueryUI function for image uploader -

i've been trying wrap head around basic javascript/jquery task.

i've made basic image uploader following html:

div class="button one"></div>     <div class="button two"></div>      <div class="size ui-widget-content">         <img src="" alt="" />         <input type='file' name='userfile'>     </div>      <div class="button three"></div> 

this code i've got far, jqueryui plugin:

$( ".size" ).resizable( {      grid: [60, 24],     ghost: true,     aspectratio: //ratio function here ,     stop: function( event , ui) {         var height = $(".size").css( "height" );         var width = $(".size").css( "width" );         $( ".size img" ).css( { width : width, height: height })     } });  $( ".size > input" ).change(function() {     var filename = $('input[type=file]').val().replace(/c:\\fakepath\\/i, '');     var height = $(".size").css( "height" );     var width = $(".size").css( "width" );      $( ".size img" ).css( { width : width, height: height } );       $( ".size img" ).attr("src" , filename);     $( ".size img" ).attr("alt", filename );      $( ".three" ).show();      var fr = new filereader;     fr.onload = function() { // file loaded         var img = new image;         img.onload = function() {             var maxwidth = 960;             var maxheight = maxwidth * (img.height/img.width);             $( ".size, .size img" ).css( { width : img.width, height: img.height, "max-height": maxheight , "max-width": maxwidth});         };     img.src = fr.result; // data url because called readasdataurl     };     fr.readasdataurl(this.files[0]); // i'm using <input type="file"> demonstrating }); 

what want following: i'm trying upload image harddrive onto page.

so far, good.

i've used jqueryui resizable function can resize image. works perfectly.

the problem however, dont know how right image ratio resizable function. need function image keep original aspect ratio when start resizing it.

basically, need value $( ".size > input" ).change function aspectratio property of $( ".size" ).resizable function

any ideas on how this?

----------------------edit-----------------------------------------------

i've tried @frédéric hamidi's solution doesnt work either. i've editted code to:

$(".size").resizable("option", "start", function( event , ui){         $(".size").resizable("option", "aspectratio", 3 / 4); }); 

but doesnt work either. firebug console says:

uncaught error: cannot call methods on resizable prior initialization; attempted call method 'option'

you can set aspectratio property in change handler, after widget has been initialized, through setter form of widget's option() method.

$(".size > input").change(function() {      // current code...      $(this).parent().resizable("option", "aspectratio", yourcomputedaspectratio); });