Trying to access variables outside the function in Javascript

Question

I am using the following snip of Javascript from another SO answer:

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);
    }
});

I cannot figure out how to get access to those this.width and this.height variables outside of the function. I have set them equal to existing variables and the variables are always 0 or null.

Outside where? They're not going to give you the values you want until the image is loaded, hence the onload handler and I'm pretty sure you need to add the image to the DOM for it to load. — user1106925
– user1106925, Commented Oct 20, 2015 at 15:52
create a global variable and assign this.width and this.height in that. :P — Kaushik
– Kaushik, Commented Oct 20, 2015 at 15:53
this refers to the image object being loaded. the onload function is executed asynchronously. — user757095
– user757095, Commented Oct 20, 2015 at 15:55
I tested your code without the _URL.createObjectURL(file) line and just created the src with a string representing the URL, and I was able to get the width and height onload. This makes me think there's something wrong with _URL.createObjectURL(file); jsfiddle.net/gzm2xghL — Paul Carlton
– Paul Carlton, Commented Oct 20, 2015 at 16:35

AtheistP3ace · Accepted Answer · 2015-10-20 15:54:44Z

Its not really useful to just make them available outside a function since you will never really know the onload happened. You want a callback that will use those values at the appropriate time.

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
}

Yes you can use a global variable but again I point out you won't know when those values have been populated and could end up with problems in your code.

also, if you end up with a ton of values that you are going to pass to the callback just make them an object and pass the object. values = {width: this.width, height: this.height} etc.

Govinda Rajbhar · Accepted Answer · 2015-10-20 15:59:09Z

-1

You can also do something like this

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);
    }
});

Now you can use height and width variable out side of your change event. now this both variables are global variable

answered Oct 20, 2015 at 15:59

Govinda Rajbhar

3,0476 gold badges42 silver badges64 bronze badges

2 Comments

dmikester1 Over a year ago

I tried doing this and the width and height were always 0/null/blank.

Govinda Rajbhar Over a year ago

@dmikester1 please follow this links stackoverflow.com/a/4862268/2798643 and stackoverflow.com/a/5786899/2798643 it may be helpful to you.

Collectives™ on Stack Overflow

Trying to access variables outside the function in Javascript

2 Answers 2

1 Comment

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Linked

Related