JavaScript: Check Upload File Extension

Filed in: Web Development — April 5th, 2004

advertisement

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…

Read also:

  • 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.
  • makiko_fly
    What about this?

    function isFileExtInRange (filePath, range) {
    var extArr = range.split(" ");
    for (var i=0; i<extArr.length; i++) {
    var actualLastIndex = filePath.toLowerCase().lastIndexOf(extArr[i]);
    var assertedLastIndex = filePath.length - extArr[i].length;
    /* **************** For Test **************************
    alert("File path:" + filePath + "\n"
    + "extArr[" + i + "]:" + extArr[i] + "\n"
    + "actualLastIndex:" + actualLastIndex + "\n"
    + "assertedLastIndex:" + assertedLastIndex);
    ********************************************* */
    if (actualLastIndex == assertedLastIndex) return true;
    }
    return false;
    }
  • makiko_fly
    Sorry, this page isn't well formatted, and I forget to explain the code "range.split(" ")"

    The above code is supposed to be used like this:

    isFileExtInRange("E:\Makiko_Fly\Resources\myPic.jpg", ".jpg .jpeg .bmp .png")
  • Riz
    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
  • Deepak
    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???
  • erkan
    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 ? ;)
  • 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.
  • LcF
    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.
  • Harold Adrian
    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
  • LcF
    Ronin, you are right. Thanks :)
    There is a better Javscript function at:
    http://www.experts-exchange.com/Web/Web_Languag...
  • Ronin
    i could upload a file called "not.a.jpg.png" and it would work. :twisted:
blog comments powered by Disqus