Multiple File Upload jquery ajax with extension
<p>I have problem in uploading multiple file upload using jquery/ajax. </p>

<p>my problem is when i try to submit a file with png or jpg file it didnt even submit and it will alert Please Upload file even though i have put a file.</p>

<p>what should i do in order to go in my else statement. coz i tried to remove my condition i just put the ajax and it works and put to my database. but when i put a condition with a proper file extension even if i have put jpg or png file still it will alert please upload file.</p>

<p>here is my CODE</p>

<p>HTML</p>

<pre><code> &lt;!-- MULTIPLE UPLOAD FORM --&gt;
 &lt;h1&gt;Multiple File Upload&lt;/h1&gt;
&lt;form id="multiple" method="POST" enctype="multipart/form-data"&gt;

    &lt;input type="file" id="file" name="file[]" multiple /&gt;
    &lt;input type="submit" id="multBtn" value="Upload File"&gt;
    &lt;/br&gt;
&lt;/form&gt;
</code></pre>

<p>Jquery</p>

<pre><code>$("#multBtn").on('click',function(e){
e.preventDefault();
var imgData = document.getElementsByName('file')[0]; 
var imageUploadPath = imgData.value;

if(imageUploadPath == ''){ // user did not upload anything
    alert('Please Upload File');
}
else{
    //user uploaded a file
    var Extension = imageUploadPath.substring(imageUploadPath.lastIndexOf('.')+1).toLowerCase();
    if(Extension == "png" || Extension == "Jpeg" || Extension == "jpg"){
        $.ajax({
        url: '/uploadMultipleImg',
        type: 'POST',
        data: new FormData($(this).parents('form')[0]),
        cache: false,
        contentType: false,
        processData: false,
        success: function(data){

        },
        });
        return false;
    }   }
</code></pre>