php - Html file upload filter onclick possible? -

I am creating a Facebook application that allows the user to upload photos via HTML form. I was thinking that it is possible to apply a filter to check the file extension before the form is deposited.

  & lt; Form enctype = "multipart / form-data" action = "uploader.php" method = "post" & gt; & Lt; Input type = "hidden" name = "MAX_FILE_SIZE" value = "2000000" /> Choose a file to upload: & lt; Br / & gt; & Lt; 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) & lt; Br / & gt; & Lt; Input type = "submit" value = "upload file" class = "btn" onmouseover = "this.className = 'btn btnhov'" onmouseout = "this.className = 'btn'" onclick = 'checkExt ()' / Gt; & Lt; / Form & gt;   
 I have tried the ways, javascript or php  
  function checkExt () {var filePath = document.getElementByName ("uploadedfile"); If (filePath.indexOf ('.') == -1) Return false; Var valid extensions = new array (); Var ext = filePath.substring (filePath.lastIndexOf ('.') + 1) .toLowerCase (); Valid extensions [0] = 'jpg'; Valid extension [1] = 'jpeg'; Valid extensions [2] = 'BMP'; Valid extensions [3] = 'PNG'; Valid extensions [4] = 'GIF'; (Var i = 0; i & lt; valid extensions). Langham; I ++) {if (ext == valid extension [i]) back to true; } Top.location.href = 'http://www.google.com'; return false; }   
 For PHP, is there a way to get the file information before submitting the form?  
  $ file = document.getElementByName ("uploadFile"); // wondering if it works $ Result_array = getimagesize ($ file); If ($ result_array! == incorrect) {$ mime_type = $ result_array ['mime']; Switch ($ mime_type) {case "image / jpeg": Eko "file is JPEG type"; break; Case "Image / GIF": "File GIF Type" echo; break; Default: Echo "File is an image, but not of GIF or JPEG type"; }} Else {echo "file is not valid image file"; }   
 Please advise me I'm still new to the Facebook application.   
 
 
 Why do you redirect again if they try to upload the wrong ext? I  top.location.href = 'http://www.google.com';   
. You have many errors in the script.  
  var filePath = document.getElementByName ("Uploaded file");   
 should be  
  var filePath = document.getElementsByName ("uploaded file") [0]. value; Add   
 or the ID  
  var filePath = document.getElementById ("Uploaded file"). Values;   
 Or use my preferred method and pass the forest object to the function:  
  & lt; Form onsubmit = "return checkExt (this)" ... ... Function checkext (form) {var filePath = theForm.uploadedfile.value;   
 Finally, click submit and put it on the onsite of the form:  
   Choose a file to upload: & lt; Br / & gt; & Lt; Input name = "uploadedfile" id = "uploadedfile" type = "file" class = "btn" onmouseover = "this.className = 'btn btnhove'" onmouseout = "this.className = 'btn'" accept = "image / gif , Image / png, image / jpeg "/> (Limit: 2MB) & lt; Br / & gt; & Lt; Input type = "submit" value = "upload file" class = "btn" onmouseover = "this.className = 'btn btnhov'" onmouseout = "this.className = 'btn'" /> & Lt; / Form & gt;