Попытки получить доступ к переменным вне функции в Javascript

Question

Я использую следующий надрез на Javascript от другого SO ответа:

var _URL = window.URL || window.webkitURL; 
$("#file").change(function (e) { 
    var file, img; 
    if ((file = this.files[0])) { 
     img = new Image(); 
     img.onload = function() { 
      alert(this.width + " " + this.height); 
     }; 
     img.src = _URL.createObjectURL(file); 
    } 
}); 

Я не могу понять, как получить доступ к этим this.width и this.height переменного вне функции. Я установил их равными существующим переменным, а переменные всегда равны 0 или null.

Answer 1

Его не очень полезно просто сделать их доступными вне функции, так как вы никогда не узнаете, что произошло. Вы хотите обратный вызов, который будет использовать эти значения в соответствующее время.

var _URL = window.URL || window.webkitURL; 
$("#file").change(function (e) { 
    var file, img; 
    if ((file = this.files[0])) { 
     img = new Image(); 
     img.onload = function() { 
      someCallback(this.width, this.height); 
     }; 
     img.src = _URL.createObjectURL(file); 
    } 
}); 

function someCallback (width, height) { 
    // use those values 
} 

Да, вы можете использовать глобальную переменную, но снова я указываю вы не будете знать, когда эти значения были заселены и может в конечном итоге с проблемами в вашем коде.

Answer 2

Вы также можете сделать что-то вроде этого

var _URL = window.URL || window.webkitURL; 
var width=""; 
var height=""; 
$("#file").change(function (e) { 
    var file, img; 
    if ((file = this.files[0])) { 
     img = new Image(); 
     img.onload = function() { 
      width=this.width; 
      height=this.height; 
     }; 
     img.src = _URL.createObjectURL(file); 
    } 
}); 

Теперь вы можете использовать height и width переменные из стороны вашего события изменения. теперь эти обе переменные являются глобальными переменными