圖像上傳器的基本jQueryUI功能

我一直在試圖圍繞一個非常基本的Javascript/jQuery任務包裝我的頭。圖像上傳器的基本jQueryUI功能

我做了一個基本的圖像上傳與下面的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>

這是迄今爲止我已經得到了代碼，從jQueryUI的插件：

$(".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 is 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; // is the data URL because called with readAsDataURL 
    }; 
    fr.readAsDataURL(this.files[0]); // I'm using a <input type="file"> for demonstrating 
});

我想要什麼要做的是以下幾點：我試圖從硬盤上傳圖像到頁面上。

到目前爲止，一切都很好。

我已經使用jQueryUI可調整大小的功能，以便我可以調整圖像大小。這工作完美。

然而，問題是我不知道如何獲得正確的圖像比例到可調整大小功能。我需要這個功能，以便在我開始調整大小時，圖像將保持其原始高寬比。

基本上，我需要從$（「.size>輸入」）.change功能到$的的aspectRatio屬性來（「.size」）.resizable功能得到關於如何

任何想法的值去做這個？

----------------------編輯----------------------- ------------------------

我試過@FrédéricHamidi的解決方案，但它也不工作。我editted代碼：

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

但是，這並不工作要麼。螢火蟲控制檯說：

未捕獲錯誤：在初始化之前無法調用可調整大小的方法;試圖調用方法「選項」

來源

2014-04-06 Brannie19

您可以設置aspectRatio屬性在change處理程序，小部件已經被初始化後，通過小部件的option()方法的二傳手形式。

$(".size > input").change(function() { 

    // Your current code... 

    $(this).parent().resizable("option", "aspectRatio", yourComputedAspectRatio); 
});

來源

2014-04-06 16:38:28

我試過這個，但它沒有工作。 aspectRatio沒有設置，即使我將aspectRatio硬編碼爲3/4 – Brannie19

我知道這確實很舊，但是可能值得注意的是，一旦修復了此JQueryUI錯誤，此_will_將成爲正確的答案https：//bugs.jqueryui .com/ticket/4186顯然已經存在了8年，但它看起來可能實際上在下一個版本中得到修復1.12.2 –

圖像上傳器的基本jQueryUI功能

回答

相關問題