jQuery find file extension (from string)

Question

I was wondering if it was possible for jQuery to find a file extension based on a returned string?

A filename (string) will be passed to a function (openFile) and I wanted that function to do different things based on what file has been passed through, it could be image files or pdf files.

function openFile(file) { 

  //if .jpg/.gif/.png do something

  //if .zip/.rar do something else

  //if .pdf do something else

};

I've been looking for something that will find the file's extension but I can't seem to find anything.

user113716 · Accepted Answer · 2010-06-15 03:37:43Z

95

How about something like this.

Test the live example: http://jsfiddle.net/6hBZU/1/

It assumes that the string will always end with the extension:

function openFile(file) {
    var extension = file.substr( (file.lastIndexOf('.') +1) );
    switch(extension) {
        case 'jpg':
        case 'png':
        case 'gif':
            alert('was jpg png gif');  // There's was a typo in the example where
        break;                         // the alert ended with pdf instead of gif.
        case 'zip':
        case 'rar':
            alert('was zip rar');
        break;
        case 'pdf':
            alert('was pdf');
        break;
        default:
            alert('who knows');
    }
};

openFile("somestring.png");

EDIT: I mistakenly deleted part of the string in openFile("somestring.png");. Corrected. Had it in the Live Example, though.

edited Jun 15, 2010 at 3:37

answered Jun 15, 2010 at 3:29

user113716

323k64 gold badges454 silver badges441 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Doug Neiner Over a year ago

Haha, I almost left a comment, then I thought Hmm... maybe I am not understanding something. +1 great answer

Amir Surnay Over a year ago

this way won't work when the file does not have a extension. like folder/file-without-extension

cantsay Over a year ago

so is this faster than .split('.').pop(); which is posted below?

Doug Neiner · Accepted Answer · 2010-06-15 03:35:11Z

90

To get the file extension, I would do this:

var ext = file.split('.').pop();

answered Jun 15, 2010 at 3:35

Doug Neiner

66.4k14 gold badges111 silver badges118 bronze badges

3 Comments

user113716 Over a year ago

+1 - Much nicer way of getting the extension. Wish I'd thought of it!

kriscondev Over a year ago

Yep.. neat. though I changed it to file.name.split('.').pop() because my var file is an object. Thanks!

Roy Shoa Over a year ago

the script will not work correctly when having query-string parameters, e.g. /example/image.jpg?a=b&b=2, to handle it i added one more splits file.split("?")[0].split('.').pop() (note: a lot of times systems used query-string to prevent cache when needed)

artlung · Accepted Answer · 2010-06-15 03:39:13Z

17

Yet another way to write it up:

function getExtension(filename) {
    return filename.split('.').pop().toLowerCase();
}

function openFile(file) { 
    switch(getExtension(file)) {
        //if .jpg/.gif/.png do something
        case 'jpg': case 'gif': case 'png':
            /* handle */
            break;
        //if .zip/.rar do something else
        case 'zip': case 'rar':
            /* handle */
            break;

        //if .pdf do something else
        case 'pdf':
            /* handle */
            break;
    }
}

answered Jun 15, 2010 at 3:39

artlung

33.5k19 gold badges76 silver badges124 bronze badges

Comments

rahul · Accepted Answer · 2010-06-15 03:29:19Z

11

You can use a combination of substring and lastIndexOf

Sample

var fileName = "test.jpg";
var fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1);

answered Jun 15, 2010 at 3:29

rahul

188k50 gold badges239 silver badges266 bronze badges

Comments

Amr SubZero · Accepted Answer · 2014-11-20 03:50:58Z

3

var fileName = 'file.txt';

// Getting Extension

var ext = fileName.split('.')[1];

// OR

var ext = fileName.split('.').pop();

answered Nov 20, 2014 at 3:50

Amr SubZero

1,2865 gold badges21 silver badges32 bronze badges

Comments

futureelite7 · Accepted Answer · 2010-06-15 03:20:36Z

1

Since the extension will always be the string after a period in a complete/partial file name, just use the built in split function in js, and test the resultant extension for what you want it to do. If split returns only one piece / no pieces, it does not contain an extension.

answered Jun 15, 2010 at 3:20

futureelite7

11.5k10 gold badges56 silver badges89 bronze badges

Comments

Jacob Relkin · Accepted Answer · 2010-06-15 03:30:00Z

1

Try this:

var extension = fileString.substring(fileString.lastIndexOf('.') + 1);

answered Jun 15, 2010 at 3:30

Jacob Relkin

163k34 gold badges351 silver badges321 bronze badges

Comments

RickL · Accepted Answer · 2018-05-14 14:32:09Z

Another way (which avoids extended switch-case statements) is to define arrays of file extensions for similar processing and use a function to check the extension result against an array (with comments):

// Define valid file extension arrays (according to your needs)
var _docExts = ["pdf", "doc", "docx", "odt"];
var _imgExts = ["jpg", "jpeg", "png", "gif", "ico"];
// Checks whether an extension is included in the array
function isExtension(ext, extnArray) {
    var result = false;
    var i;
    if (ext) {
        ext = ext.toLowerCase();
        for (i = 0; i < extnArray.length; i++) {
            if (extnArray[i].toLowerCase() === ext) {
                result = true;
                break;
            }
        }
    }
    return result;
}
// Test file name and extension
var testFileName = "example-filename.jpeg";
// Get the extension from the filename
var extn = testFileName.split('.').pop();
// boolean check if extensions are in parameter array
var isDoc = isExtension(extn, _docExts);
var isImg = isExtension(extn, _imgExts);
console.log("==> isDoc: " + isDoc + " => isImg: " + isImg);
// Process according to result: if(isDoc) { // .. etc }

Collectives™ on Stack Overflow

jQuery find file extension (from string)

8 Answers 8

3 Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

3 Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related