Question

我正在使用以下来自另一个SO答案的Javascript片段：

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

只是让它们在函数外部可用才真正有用，因为你永远不会真正知道onload发生了。您需要一个将在适当的时间使用这些值的回调。

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变量。现在这两个变量都是全局变量

试图在Javascript中访问函数外部的变量

2 个答案: