 <p>Check here: <a href="http://jsfiddle.net/uh2Gn/" rel="nofollow noreferrer">http://jsfiddle.net/uh2Gn/</a></p> <p>HTML:</p> <pre><code>&lt;form method="post" enctype="" onsubmit="return validate()"&gt; &lt;input type="file" id="file" /&gt; &lt;input type="submit" /&gt; &lt;/form&gt; </code></pre> <p>JavaScript:</p> <pre><code>function validate() { var filename=document.getElementById('file').value; var extension=filename.substr(filename.lastIndexOf('.')+1).toLowerCase(); //alert(extension); if(extension=='jpg' || extension=='gif') { return true; } else { alert('Not Allowed Extension!'); return false; } } </code></pre> <p>Keep in mind that this is only for user convenience, that he doesn't go theu a long submit process to get an error at the server, cuz for sure you <em>must</em> implement a check at server-side.</p>