JavaScript: Check Upload File Extension

April 5, 2004 in Web Development by

Use: Simple JavaScript to check file extention for a form with file upload feature, so that user does not upload the wrong file type

Compatibility: Tested on Internet Explorer(IE) 6.0 and Mozilla 1.6. Should work for IE4+ and Netscape 4+

Code:

if((document.form1.upload.value.lastIndexOf(".jpg")==-1) {
   alert("Please upload only .jpg extention file");
   return false;
}

Explain: lastIndexOf will return the index of the last occurrence of the specified search argument. If not found, -1 will return. More detail…

11 Responses to JavaScript: Check Upload File Extension

  1. Ronin July 12, 2004 at 7:33 pm #

    i could upload a file called “not.a.jpg.png” and it would work. :twisted:

    Reply
  2. LcF July 13, 2004 at 2:07 am #

    Ronin, you are right. Thanks :)
    There is a better Javscript function at:
    http://www.experts-exchange.com/Web/Web_Languages/ASP/Q_20895703.html

    Reply
  3. Harold Adrian May 19, 2005 at 3:08 am #

    hola Liew.

    esta bueno ese script pero me gustaria que coloques scripts como la de cargar un archivo e insertarlo en un campo blob de una base de datos

    Reply
  4. LcF May 19, 2005 at 7:08 am #

    I don’t read spanish, here is translation of babelfish:

    this good that script but gustaria me that you place scripts as the one to load a file and to insert it in a field blob of a data base

    I assume you want me to write a file that upload the file and put in database? Sorry, javascript does not do that. You need to use PHP, ASP or other server side language.

    Reply
  5. Amitava November 23, 2006 at 1:07 pm #

    I want a javascript to check for a valid CSV file and not just the extension. I mean if somebody renames any exe into CSV and tries to upload, the script should not allow.

    Reply
  6. erkan July 20, 2007 at 5:13 am #

    hi ,

    i think there is some small problem :) because there ) missing. it is like this :

    if((document.form1.upload.value.lastIndexOf(”.jpg”)==-1) {

    but i think i must be like this ;

    if((document.form1.upload.value.lastIndexOf(”.jpg”)==-1) ) {

    isnt it ? ;)

    Reply
  7. Deepak December 30, 2007 at 2:45 pm #

    Hiiiii friends , I wanna know how to check the complete path browse in the file field in javascript ????
    check is path is valid or not???

    Reply
  8. Riz January 8, 2008 at 7:00 pm #

    Nice JS .. but this will not work if the name is like file.jpg.zip
    Here is better solution fom another site

    function checkExt(formObj){
    var filename = formObj.fileToUpload.value;
    var filelength = parseInt(filename.length) – 3;
    var fileext = filename.substring(filelength,filelength + 3);

    // Check file extenstion
    if (fileext != “gif” && fileext != “jpg”){
    alert (“You can only upload gif or jpg images.”);
    formObj.fileToUpload.focus();
    return false;
    }
    formObj.submit();
    }

    Thanks

    - http://www.PDFonFly.com

    Reply
  9. Jean-Francois April 8, 2008 at 4:26 pm #

    Your solution works, but:
    When a file with the extention JPG or GIF is used, it does not pass the test… I have got this case on my website. A fix to your solution might be:

    function checkExt(formObj){
    var filename = formObj.fileToUpload.value;
    var filelength = parseInt(filename.length) – 3;
    var fileext = filename.substring(filelength,filelength + 3);

    // Check file extenstion
    if (fileext.toLowerCase() != “gif” && fileext.toLowerCase() != “jpg”){
    alert (”You can only upload gif or jpg images.”);
    formObj.fileToUpload.focus();
    return false;
    }
    formObj.submit();
    }

    With this anything like
    myphoto.JPG
    myphoto.Jpg

    Will be valid :)

    Hope this can be of help to someone.

    Reply

Leave a Reply