SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Sep 2003
    Location
    Cairo, Egypt
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Another problem with a "file" form field uploader

    hi again, this is my second post, this time i guess i'm in the right forum :-) as far as i know, my question is related somehow to Javascript.
    well, within my form, there's a file field, where i want to first validate that the user has browesed and choosen a certain file format (let's say ".jpg" OR ".gif") with a maximum size of 20K.
    we see this script everywhere when we're dealing with forms on the net, so can anybody enlighten me with the Javascrpit validating code that can do this task?
    by the way, i'm a PHP programmer, so plz forgive my amateur JS questions
    thanks

  2. #2
    SitePoint Wizard silver trophybronze trophy asp_funda's Avatar
    Join Date
    Jun 2003
    Location
    ether
    Posts
    4,479
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    as far as I know, you cannot validate the file size on the client side. You'll have to use the server-side script to do that & as for the client side validation of the file type, well, that maybe possible, never tried it myself though.
    Our lives teach us who we are.
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Me - Photo Blog - Personal Blog - Dev Blog
    iG:Syntax Hiliter -- Colourize your code in WordPress!!

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    The "accept" attribute of the file input should limit what types of files are uploaded. For example, this should filter it out so one can only choose jpegs and gifs:
    HTML Code:
    <input type="file" accept="image/jpeg, image/gif" name="file1" />
    I know that this doesn't work in IE though (and I don't think other browsers support it either). You can do a validation routine in Javascript to reinforce it though:
    Code:
    <script type="text/javascript">
      function checkFileType(f) {
       var ext, valid;
           for (var i = 0; i < f.elements.length; i++) {
              if (f.elements[i].type == "file") {
                  ext = f.elements[i].value.substring(f.elements[i].value.lastIndexOf("."), f.elements[i].value.length);
                  if (ext == "jpg" || ext == "jpeg" || ext == "jpe" || ext == "gif") {
                     valid = true;
                  } else {
                     valid = false;
                  }
                  if (!valid) alert('Please choose the right type of file!'); return false;
              }
           }
      }
    </script>
    HTML Code:
    <form id="theForm" onsubmit="return checkFileType(this);">
    I know this routine can also be optimized a lot more.

  4. #4
    SitePoint Zealot Arkkimaagi's Avatar
    Join Date
    Mar 2002
    Location
    Lappeenranta, Finland
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also validating with javascript is never a good solution as the only solution. If you're checking for bad filetypes with javascript, remember to check those things serverside too. Javascript could be turned off, people can make their own pages that will submit the info. There are even tools to edit the form online
    before sending it.


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
  •