I am developing a database driven web app. and there is a cell that users can enter any image url or string as input.
is there a function that, image url / string seperation and if it is image, checks for existence.
I need to do that, if a user entered an image url then image is going to show into app (if exists), otherwise if user entered a string (message) then message is going to placed into app.

Just for demonstration;

function check_imageornot(data){
    ...........
    if -> image && exist -> return 'image_ok';
    if -> image && not_exist -> return 'image_no';
    if -> string -> return 'string';
    }
}

NOTE: This function will be put into .js file so Javascript/jQuery way is needed (can be regex way in JS/jQuery too...)

I am developing a database driven web app. and there is a cell that users can enter any image url or string as input.
is there a function that, image url / string seperation and if it is image, checks for existence.
I need to do that, if a user entered an image url then image is going to show into app (if exists), otherwise if user entered a string (message) then message is going to placed into app.

Just for demonstration;

function check_imageornot(data){
    ...........
    if -> image && exist -> return 'image_ok';
    if -> image && not_exist -> return 'image_no';
    if -> string -> return 'string';
    }
}

NOTE: This function will be put into .js file so Javascript/jQuery way is needed (can be regex way in JS/jQuery too...)

• javascript
• jquery
• image
• url

• @Paul Nikonowicz, yes i need a javascript way. Function is written for only idea that i need. – Alper Commented Mar 1, 2012 at 16:08

4 Answers 4

Just a small modification:

if (/(jpg|gif|png|JPG|GIF|PNG|JPEG|jpeg)$/.test(input)){ // image url as input

that way it will understand different ways of seeing the file extension.

I know this is an old post my friend, but here is the code I use on my site to check if an image url is valid or not:

function is_image(url,callback,errorcallback) {

var img = new Image();
if (typeof(errorcallback) === "function") {
    img.onerror = function() { errorcallback(); }
} else {
    img.onerror = function() { return false; }
}
if (typeof(callback) === "function") {
    img.onload = function() { callback(); }
} else {
    img.onload = function() { return true; }
}
img.src = url;

}

Literally what the function is doing is checking to see if the image loads or not. For instance, if the url is "http://www.google.com", the function will return an error (so it will run the function placed in img.onerror()), because the homepage of google is not an image, it is an html file. Since this function requires the url to send back information, it is an asynchronous function, meaning you cannot rely on the function to follow the flow of the Javascript, it is like sending an AJAX request. So whatever code you want the function to run afterwards, you have to put it as the second argument into the function. So for instance, you're code can look as such:

var imagelink = "http://www.google.com";
is_image(imagelink,function(){ 
    alert("This is an image!"); 
},function(){ 
    alert("This is not an image!")
});

So if the link is an image, a window will popup saying "This is an image!", if not, the window will say "This is not an image!" This function will always work, even if the extension is not .jpg or anything of the sort.

I solved my problem with below function;

function is_image_valid(src) {
// Create new offscreen image to test
var image_new = new Image();
image_new.src = src;
// Get accurate measurements from that.
if ((image_new.width>0)&&(image_new.height>0)){
    return true;
} else {
    return false;
}
}

function is_image_ornot(input) {
if (/(jpg|gif|png)$/.test(input)){ // image url as input
    if (is_image_valid(input)){ // image found
        return 'image_ok';
    } else { // image couldnt be found
        return 'image_not';
    }
} else { // string as input
    return 'string';
}
};

/* usage */ is_image_ornot(variable)

BUT, as Pointy described not all jpg ended string means that it is an image... This will work for me because this project will be used inside of a company and all control in my hands.

I put these code here to only give an idea to others...

You can't tell if a file is an image just by looking at its name (or its URL). If you're talking about a local file, you could use HTML5 file manipulation tools to open the file and sniff its contents. If the URL could be for a file anywhere on the Internet, however, you'll have to send the URL to your server and have it figure out what it is.

edit — @GGG has an interesting idea in a comment.