Javascript: Verify External Url Of An Image

Question

Suppose i have EXTERNAL URL(not from my website) and i want to verify it to make sure this url is one from these files:- jpg, jpeg, gif, png and also is a correct image file (not any script file or php). Also if this is possible:- Check if the url of the image is working or not.

@jfriend00 ok so here is what i'am trying to do. I had maded html form and when people submit it, it will call to a javascript function which will verify if the url is an image. So here is my code. But it's not working. Please tell me what should i do from here?

<script type="text/javascript"> 

function vrfyImgURL() {
var x = document.forms["submitIMGurl"].elements["img_url"].value;

if(x.match('^http://.*/(.*?).(jpe?g|gif|png)$')){

var imgsrc = x;
var img = new Image();

img.onerror = function(){
alert("Can't Be Loaded");
return false;
}
img.onload = function(){
alert("Loaded Successfully");
return true;
}

img.src = imgsrc;

}else{
    alert("It looks like the url that you had provided is not valid! Please only submit correct image file. We only support these extensions:- jpeg, jpg, gif, png.");
return false;   
}
} 
</script>

<form action="http://www.example.com/current_page" enctype='multipart/form-data' method="post" onsubmit="return vrfyImgURL();" name="submitIMGurl">
<input type="text" value="http://" name="img_url" />
<input type="submit" value="Submit" />
</form>

Why are you asking the identical question you asked here: http://stackoverflow.com/questions/9714525/javascript-image-url-verify/9714891#9714891 which I answered once before? — jfriend00, Mar 17 '12 at 22:31
@jfriend00 because that solution is not working with external image url in chrome — John Preston, Mar 17 '12 at 22:58
That solution does not care whether the image URL is local or not. Images are not restricted by domain in any way in the answer I provided. If it's not working with external images, then you are doing something else wrong. I'd suggest you post more info in that discussion and we'll address it here because it's not a new question. In my [jsFiddle](http://jsfiddle.net/jfriend00/qKtra/) in that answer, it is using external images. — jfriend00, Mar 17 '12 at 23:05
@jfriend00 hi i had included my code in the question so please take a look over there. — John Preston, Mar 17 '12 at 23:23
OK, so the question really is "How do I hook up the code provided in the previous answer to my actual form submit?" — jfriend00, Mar 18 '12 at 00:18

score 2 · Accepted Answer · edited May 23 '17 at 12:29

Your code in this post is not a correct implementation of the function I gave you in the previous post and will not work for a number of reasons. You cannot return true/false from the onload, onerror handlers. Those are asychronous events and your vrfyImgURL function has already returned.

You really HAVE to use the code I put in that previous post. It works. Just use it. Don't modify it. You pass in a callback and that callback gets called with the validation check results. You have to use asynchronous programming to use this where the callback gets called with the result. You can't use straight sequential programming like you are trying to do. It is your modifications to my code that have made it stop working.

You can see the code I gave you previously work here:http://jsfiddle.net/jfriend00/qKtra/ and in the example, it's working with images from a variety of domains. It is not sensitive to the domain of the image and <img> tags are not restricted by domain.

To hook it up to your form submit, you can do this:

<form action="http://www.example.com/current_page" enctype='multipart/form-data' method="post" onsubmit="return formSubmit();" name="submitIMGurl">
<input type="text" value="http://" name="img_url" />
<input type="submit" value="Submit" />
</form>

<script type="text/javascript">

function formSubmit() {
    var url = document.forms["submitIMGurl"].elements["img_url"].value;
    if (!checkURL(url)) {
        alert("It looks like the url that you had provided is not valid! Please only submit correct image file. We only support these extensions:- jpeg, jpg, gif, png.");
        return(false);
    }
    testImage(url, function(testURL, result) {
        if (result == "success") {
            // you can submit the form now
            document.forms["submitIMGurl"].submit();
        } else if (result == "error") {
            alert("The image URL does not point to an image or the correct type of image.");
        } else {
            alert("The image URL was not reachable.  Check that the URL is correct.");
        }

    });
    return(false);    // can't submit the form yet, it will get sumbitted in the callback
}

function checkURL(url) {
    return(url.match(/\.(jpeg|jpg|gif|png)$/) != null);
}


function testImage(url, callback, timeout) {
    timeout = timeout || 5000;
    var timedOut = false, timer;
    var img = new Image();
    img.onerror = img.onabort = function() {
        if (!timedOut) {
            clearTimeout(timer);
            callback(url, "error");
        }
    };
    img.onload = function() {
        if (!timedOut) {
            clearTimeout(timer);
            callback(url, "success");
        }
    };
    img.src = url;
    timer = setTimeout(function() {
        timedOut = true;
        callback(url, "timeout");
    }, timeout); 
}

</script>

If this were my interface, I would disable the form and put up a note that the image URL is being checked starting when testImage is called and ending when the callback is called.

but how should i use your code to verify the url submitted by the user using the form. I mean how to implement your code on onsubmit="" — John Preston, Mar 18 '12 at 00:02
Just Awesome. It works but just needed to add "return" in onsubmit="" before function. Thanks alot man. — John Preston, Mar 18 '12 at 00:34

Javascript: Verify External Url Of An Image

1 Answers1

Linked