Javascript to classify files as images

Question

I have a url in javascript, set as a variable. Like:

var imageurl='example.com/test/real/image.jpg';

I am trying to recognize if this is an image url or not (ending with jpeg, jpg, gif, png etc.).

I tried using charAt but it did not work.

What's the best way to return a 1 if it is an image url and 0 otherwise using javascript?

http://stackoverflow.com/questions/680929/how-to-extract-extension-from-filename-string-in-javascript — david, Nov 06 '11 at 10:53
Are you aware that on the web the file extension has absolutely nothing to say to whether an URL points to an image or not? It's absolutely possible to have a URL without one of those endings return an image and inversely have a URL **with** such an extension return anything but an image. — RoToRa, Nov 06 '11 at 11:13

score 3 · Answer 1 · answered Nov 06 '11 at 11:05

3

here you go:

var imageurl = 'example.com/test/real/image.jpg';
ext = imageurl.split('.').reverse()[0];
if (['jpg','gif','png'].indexOf(ext.toLowerCase()) > -1) {
    console.log('true!');
} else {
    console.log('false!');
}

answered Nov 06 '11 at 11:05

marxus

462
2
6

score 3 · Accepted Answer · answered Nov 06 '11 at 12:12

I am trying to recognize if this is an image url or not (ending with jpeg, jpg, gif, png etc.).

The file extension (if there even is one) has no bearing on whether a URL points to a resource that is an image type. That is only a convention used by some people for static resources.

Looking at the file extension can be enough if you only need it as a general heuristic:

// User browser's built-in URL parsing to discard query string etc
//
var a= document.createElement('a');
a.href= url;
var ext= a.pathname.split('.').pop().toLowerCase();
var mightbeimage= ext=='gif' || ext=='jpeg' || ext=='jpg' || ext=='png';

but for accuracy the only way to find out if a URL points to an image is to fetch that URL and see what comes back. Typically you'd do that by issuing a HEAD request to the URL and seeing if the headers in the response contain Content-Type: image/something.

You can't do that directly from browser JavaScript, but what you can do is create an image element and see if loads OK:

function checkImage(url, callback) {
    var img= new Image();
    img.onload= function() { callback(true); }
    img.onerror= function() { callback(false); }
    img.src= url;
}

checkImage('http://www.google.co.uk/images/srpr/logo3w.png', function(isimage) {
    if (isimage)
        alert('Yes, it is an image');
    else
        alert('Nope, not an image, or does not exist or other error');
});

score 1 · Answer 3 · answered Nov 06 '11 at 11:07

1

If you're just after a way of figuring out things from the string, try using the following:

var imageurl = "some.gif";
imageurl.match("(?:png|jpe?g|gif)$");
// returns ['gif']

It's not a particularly complete or elegant solution, but it works.

answered Nov 06 '11 at 11:07

Chris

9,994
3
29
31

score 0 · Answer 4 · answered Nov 06 '11 at 10:52

0

Use lastIndexOf and substring to get the file extension and compare that to the different image types you are interested in.

answered Nov 06 '11 at 10:52

Oded

489,969
99
883
1,009

score 0 · Answer 5 · answered Nov 06 '11 at 11:05

0

try:

var fileName = "'example.com/test/real/image.jpg'";
alert(fileName.substring(fileName.lastIndexOf('.') + 1));

you get your file extension.As per condition manipulate it.

answered Nov 06 '11 at 11:05

4b0

21,981
30
95
142

Javascript to classify files as images

5 Answers5