Save multiple browsed file to a folder

Question

I have a frontend form (submitted via ajax). I have a button "Add File".Files can be browsed on its each button click.

I want to upload multiple files and save all the files uploaded to a folder.

How is it possible to do it using php/jquery. Please help.

This is the phtml

<form> 
    <div class="input-box"></input>
    <div class="input-box">
        <label for="addfile"><?php echo $this->__('Select File(s)');?></label><br />
        <p>Upload any files that are necessary for your order by clicking on the Add File(s) button below.</p>
        <input type="file" class="file" id="file" name="file[]" style="display: none;" onchange="fileSelected(this)" multiple="multiple">
        <input type="button" class="button" id="btnAttachment" onclick="if(dataForm.validator && dataForm.validator.validate()){ openAttachment();}" value="Add File(s)"/>
    </div>
    <div id="select-file-form">
        <div class="select-file-outer" id="select-file" style="display:none">
                <label for="addfile"><?php echo $this->__('Select File(s)');?></label><br />
                <p>Upload any files that are necessary for your order by clicking on the Add File(s) button below.</p>
                <label for="files-for"><?php echo $this->__('Files for:');?></label><br />
                <div class="select-file-company" id="select-file-company"></div>
                <div class="select-file-name" id="select-file-name"></div>
                <div class="select-file-phnmbr" id="select-file-phnmbr"></div>
                <div class="select-file-email" id="select-file-email"></div>
                <div class="select-file-det" id="select-file-det"></div>
                <div>
                    <input type="button" class="button" id="btnAttachment" onclick="openAttachment()" value="Add File(s)"/>
                </div>
                <div>
                    <input type="button" class="button" id="btnUpload" onclick="callAjax()" value="Upload File(s)"/>
                </div>
        </div>
    </div>
</form>   

This is the script

<script type="text/javascript">
var dataForm = new VarienForm('upload_form');

function openAttachment() {
  document.getElementById('file').click();

}

function fileSelected(input){
      var _size = input.files[0].size;
      var fSExt = new Array('Bytes', 'KB', 'MB', 'GB'),
      i=0;while(_size>900){_size/=1024;i++;}
      var exactSize = (Math.round(_size*100)/100)+' '+fSExt[i];
      var file_det ='<span id="filename">'+input.files[0].name+'</span><span id=exactsize>'+exactSize+'</span></br>';

      //if(_size>0){
        document.getElementById("upload_form_outer").style.display = "none";   
        document.getElementById("select-file").style.display = "block"; 
        document.getElementById("select-file-company").innerHTML = document.getElementById("company").value;
        document.getElementById("select-file-name").innerHTML = document.getElementById("f_name").value+" "+document.getElementById("l_name").value;
        document.getElementById("select-file-phnmbr").innerHTML = "Phone Number:"+document.getElementById("phnmbr").value;
        document.getElementById("select-file-email").innerHTML = "Email:"+document.getElementById("email").value;
        document.getElementById("select-file-det").innerHTML += file_det;
     // }    
}

function callAjax(){
    //var input = document.getElementById('attachment');
    var formData = new FormData();
    //formData.append("file", file);
    var filename = document.getElementById("filename").innerHTML;
    var companyname = document.getElementById("company").value;
    var name = document.getElementById("f_name").value+" "+document.getElementById("l_name").value;
    var phnumber = document.getElementById("phnmbr").value;
    var email = document.getElementById("email").value;
    var file = document.getElementById("select-file-det").innerHTML;
     jQuery.ajax({
        url: "<?php echo Mage::getUrl('uploads/index/fileupload'); ?>",
        type: "POST",
        data: formData,
        contentType: 'multipart/form-data',
        processData: false,
        contentType: false,
        success: function(res) {

        },       
        error: function(res) {

        }    
   });
}

</script>

This is the php function.

  $post = $this->getRequest()->getPost();
  $company = $this->getRequest()->getParam('company');
  $name = $_POST['name'];

  try{
      for($i=0; $i<count($_FILES['file']['name']); $i++){
        Mage::log('name'.$_FILES['file']['name'], null, 'test.log');
        Mage::log('size'.count($_FILES['file']['name']), null, 'test.log');
          $location = 'upload';
          $path =  Mage::getBaseDir() . DS .$location;
          $file = new Varien_Io_File(); 
          $files = glob($path . '*', GLOB_MARK);
          foreach ($files as $f) {
              if (! is_dir($f)) {     
                  unlink($f);
              }
          }
          $fileName = $_FILES['file']['name'];
          $dirResult = $file->mkdir($path);
          $uploader = new Varien_File_Uploader('file');
          //$uploader->setAllowedExtensions(array('csv','zip','img','pdf','png'));
          $uploader->setAllowRenameFiles(false);
          $uploader->setAllowCreateFolders(true);
          $uploader->setFilesDispersion(false);
          $uploader->save($path, $fileName); 

      }
    }catch(Exception $e) {
          echo 'Message: ' .$e->getMessage();
    }

}

But it is not entering to the for loop. How can we access the form data in php function?

I have tried with this link. But $_FILES['file']['name'] logs null. How to upload multiple files using PHP, jQuery and AJAX