SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Apr 2003
    Location
    UK
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    file upload checking problem

    Hi all,

    I'm trying to validate file types on a file upload from field.

    The problem I'm getting though is that the form still Submits after the user has been confronted with the alert message to tell them that the file they tried to upload is not allowed. I guess it's because it's just using a simple alert().

    How can I stop it submitting though?

    ------------------------------------------

    <html>
    <head>
    <SCRIPT type="text/JavaScript">
    <!--
    function TestFileType( fileName, fileTypes ) {
    if (!fileName) return;
    dots = fileName.split(".")
    //get the part AFTER the LAST period.
    fileType = "." + dots[dots.length-1];
    return (fileTypes.join(".").indexOf(fileType) != -1) ?
    alert('That file is OK!') :

    alert("Please only upload files that end in types: \n\n" + (fileTypes.join(" .")) + "\n\nPlease select a new file and try again.");
    return false;

    }
    // -->
    </SCRIPT>
    </head>
    <body>

    <form>
    <INPUT type="file" name="uploadfile">
    <br>
    <INPUT type="Submit" value="Submit" name="Submit" onclick="TestFileType(this.form.uploadfile.value, ['gif', 'jpg', 'png', 'jpeg'])">
    </form>

    </body>
    </html>

    -----------------------------------------------------

    Any help would be greatly appreciated

    Matt

  2. #2
    SitePoint Wizard
    Join Date
    Mar 2004
    Posts
    1,647
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    function checkImg() {
    var src = document.myForm.src.value;
    var ending = src.substr(src.length -3);
    switch (ending) {
    case 'png': case 'gif': case 'jpg':
    document.myForm.submit();
    break;
    default:
    alert('The file is not correct!');
    break;
    }
    }
    cheers

  3. #3
    SitePoint Guru
    Join Date
    Jun 2004
    Location
    Finland
    Posts
    703
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <script language="JavaScript" type="text/javascript">
    function CheckFile(file,validExts) {
      fileExt = file.split(".").pop();
      for (i = 0; i < validExts.length; i++) {
        if (validExts[i] == fileExt) return true; // ext matched! no need to continue looping.
      }
      // no match found.. alert something before returning false
      alert(":(");
      return false;
    }
    </script>
    Code:
    <form onsubmit="return CheckFile(this.uploadfile.value,['gif' , 'jpg' , 'png' , 'jpeg'])">
    <input type="file" name="uploadfile"><br>
    <input type="submit" value="Submit" name="Submit">
    </form>

  4. #4
    SitePoint Wizard
    Join Date
    Mar 2004
    Posts
    1,647
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <script language="JavaScript" type="text/javascript">
    function CheckFile(file,validExts) {
      fileExt = file.split(".").pop();
      for (i = 0; i < validExts.length; i++) {
        if (validExts[i] == fileExt) {
    return true; // ext matched! no need to continue looping.
      } else {
      // no match found.. alert something before returning false
      alert(":(");
      return false;
    }
    }
    </script>
    cheers

    ps. nice function though

  5. #5
    SitePoint Zealot
    Join Date
    Apr 2003
    Location
    UK
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the speedy replies guys..

    much appreciated

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    california, usa
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    function checkFile2(fname)
    {
      var re = /(.)*\.(gif|jpg|png|jpeg)$/i;
      return re.test(fname);
    }
    
      // test
    var f1 = "abc/image1.jpg";     // true
    var f2 = "picture2.JPEG";      // true
    var f3 = "notpicture3.giff";   // false
    
    alert( f1 + " : " + checkFile2(f1) + "\n" +
           f2 + " : " + checkFile2(f2) + "\n" + 
           f3 + " : " + checkFile2(f3) + "\n");

  7. #7
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    california, usa
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This function checkFile3() is more flexible (return true/false):
    • fname: file name to check
    • aryValidExt: array of valid file-extensions
    Code:
    function checkFile3(fname,aryValidExt)
    {
      var re = new RegExp(".*\.("+aryValidExt.join("|")+")$","i");
      return re.test(fname);
    }
    
      // test
    var f1 = "abc/image1.jpg";    // true
    var f2 = "picture2.JPEG";     // true
    var f3 = "picture3.JPEG ";    // false: trailing space
    var f4 = "notpicture4.giff";  // false
    var a1 = Array("jpg","jpeg","png","gif");
    
    alert( f1 + " : " + checkFile3(f1,a1) + "\n" +
           f2 + " : " + checkFile3(f2,a1) + "\n" + 
           f3 + " : " + checkFile3(f3,a1) + "\n" +
           f4 + " : " + checkFile3(f4,a1) + "\n" + );
    cheers.

  8. #8
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    california, usa
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    opps!
    Quote Originally Posted by ac070
    Code:
    ...
    alert( f1 + " : " + checkFile3(f1,a1) + "\n" +
           f2 + " : " + checkFile3(f2,a1) + "\n" + 
           f3 + " : " + checkFile3(f3,a1) + "\n" +
           f4 + " : " + checkFile3(f4,a1) + "\n" + );
    should be
    Code:
    ...
    alert( f1 + " : " + checkFile3(f1,a1) + "\n" +
           f2 + " : " + checkFile3(f2,a1) + "\n" + 
           f3 + " : " + checkFile3(f3,a1) + "\n" +
           f4 + " : " + checkFile3(f4,a1) + "\n" );
    cheers


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •