Another problem with a "file" form field uploader

[bluey2]

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

[asp_funda]

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.

[vgarcia]

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:

<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:

<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>

<form id="theForm" onsubmit="return checkFileType(this);">

I know this routine can also be optimized a lot more.

[Arkkimaagi]

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.