Question

function controllaFoto(target, username) {
    var _URL = window.URL || window.webkitURL;
    var img = new Image();
    img.onload = function () {
        if(this.width > 240 || this.height > 240) {
            document.getElementById("photoLabel").innerHTML = "Text";
            document.getElementById("preview").setAttribute("src", "profile?to=showImage&username="+username);
            target.value = "";
        } else {
            document.getElementById("photoLabel").innerHTML = "";
            document.getElementById("preview").setAttribute("src", this.src);
        }
    };
    img.src = _URL.createObjectURL(target.files[0]);
    return true;
}

This script is called by the onchange and onsubmit attributes and works fine in Firefox and Chrome, but not in Opera and Safari. The event onload is not triggered. Why?

UPDATE I’m testing it with Windows.

UPDATE 2 The problem is that _URL is undefined. I tried with

var _URL = window.URL || window.webkitURL || window.mozURL || window.msURL || window.oURL;

but still not working.

For Chrome its value is object DOMURL, for Firefox is object MozURLProperty, but for Safari and Opera is undefined. So the console says:

Uncaught exception: TypeError: Cannot convert ‘_URL’ to object

Answer 1

According to this MDN page, it doesn’t look like createObjectURL is supported in Opera or in some versions of Safari. That alone may be your main issue. Have you looked in the error console to see if it’s complaining about the lack of the createObjectURL method. If that method doesn’t exist, you would never get an assignment to .src so thus there would never be a successful load event.

In addition, I can’t say for sure, but this also looks like a potential issue to me. You may need to store the newly create Image object somewhere so it persists. The way your code is written above, the garbage collector may be free to dispose of the img object because there are no longer any references to it.

Perhaps you haven’t shown us all of your code, but as you have it written, what’s the point of loading an image that you will never use?

So, I’d suggest either change the way your code works to not use an image that you aren’t going to use. Or, actual store the newly create img tag somewhere so it persists and won’t get garbage collected.

I’d also ask how you know that the image is loading successfully? If you’re not using the image, how do you know it’s successfully loading.