Html file upload filter onclick possible?

i am creating a facebook application which lets user to upload photo through html form. I was wondering it is possible to implement a filter to check the file ext before the form is being submit.

<form enctype="multipart/form-data" action="uploader.php" method="POST">
<input type="hidden" name="MAX_FILE_SIZE" value="2000000" />
Choose a file to upload: <br/>
<input name="uploadedfile" type="file" class="btn"
  onmouseover="this.className='btn btnhov'" onmouseout="this.className='btn'" accept="image/gif,image/png,image/jpeg"/> (limit: 2MB)<br />
<input type="submit" value="Upload File" class="btn"
  onmouseover="this.className='btn btnhov'" onmouseout="this.className='btn'"
   onclick='checkExt()'/>
</form>

I have tried varies ways, javascript or php.

function checkExt() {
        var filePath = document.getElementByName("uploadedfile");

        if(filePath.indexOf('.') == -1)
            return false;

        var validExtensions = new Array();
        var ext = filePath.substring(filePath.lastIndexOf('.') + 1).toLowerCase();

        validExtensions[0] = 'jpg';
        validExtensions[1] = 'jpeg';
        validExtensions[2] = 'bmp';
        validExtensions[3] = 'png';
        validExtensions[4] = 'gif';  


        for(var i = 0; i < validExtensions.length; i++) {
            if(ext == validExtensions[i])
                return true;
        }

        top.location.href = 'http://www.google.com';
        return false;
    }

for the php, is there a way to get the file info before form submit?

$file = document.getElementByName("uploadedFile"); //wondering if this works. 
$result_array = getimagesize($file); 

    if ($result_array !== false) { 
        $mime_type = $result_array['mime']; 
        switch($mime_type) { 
            case "image/jpeg": 
                echo "file is jpeg type"; 
                break; 
            case "image/gif": 
                echo "fil开发者_高级运维e is gif type"; 
                break; 
            default: 
                echo "file is an image, but not of gif or jpeg type"; 
        } 
    } else { 
        echo "file is not a valid image file"; 
    }

Please advice me. I am still new to facebook application.

Why do you redirect if they try to upload a wrong ext? I would remove top.location.href = 'http://www.google.com';

You have several mistakes in the script.

  var filePath = document.getElementByName("uploadedfile");

needs to be

  var filePath = document.getElementsByName("uploadedfile")[0].value;

or add an id and do

  var filePath = document.getElementById("uploadedfile").value;

or use my favourite method and pass the form object to the function:

<form onsubmit="return checkExt(this)" ...>

function checkExt(theForm) {
  var filePath = theForm.uploadedfile.value;

Lastly remove the onclick from the submit and put it in the onsubmit of the form:

<form enctype="multipart/form-data" action="uploader.php" method="POST"
onSubmit="return checkExt(this)">
<input type="hidden" name="MAX_FILE_SIZE" value="2000000" />
Choose a file to upload: <br/>
<input name="uploadedfile" id="uploadedfile" type="file" class="btn"
  onmouseover="this.className='btn btnhov'" onmouseout="this.className='btn'" accept="image/gif,image/png,image/jpeg"/> (limit: 2MB)<br />
<input type="submit" value="Upload File" class="btn"
  onmouseover="this.className='btn btnhov'" onmouseout="this.className='btn'"/>
</form>

Just some thoughts:

• It's possible to have JS check the extension. Its just the part after the '.', so basic string-operations.
• It's not safe and not reliable, though. It can be fooled and sidestepped.
• You can send an AJAX-request to have the extension(s) transmitted before you submit the form.
• For pretty acurate FileType-Info check out PHP's FileInfo-Extension.