Uploading mehrteiliger formData mit Jquery Datei Upload

Question

Ich habe ein Formular, Darin habe ich zwei Eingabefelder, eines ist vom Typ Datei (für mehrere Dateien) und andere ist Datum.

$('#uploadForm').fileupload({ 
 
     
 
     // formData: {adminDate: $("#adminDate").val()}, 
 
     add: function (e, data) {  
 
      data.url = 'http://localhost/myProject/upload'; 
 
      $.each(data.files,function(index,file){ 
 
       $('<p/>').text(file.name).appendTo("#fileList"); 
 
      }); 
 
      
 
      $("#btnSubmit").off('click').on('click', function() { 
 
       $("#bx_loader").removeClass('hidden');    
 
       $('#upload-parent-div').css("display", "block");   
 
       
 
       data.submit(); 
 
       resetProgressbar(); 
 
       
 
      }); 
 
     }, 
 
     progress: function (e, data) { 
 
      var progress = parseInt(data.loaded/data.total * 100, 10); 
 
      console.log(progress); 
 
      $('<p/>').text(progress + '%'); 
 
     }, 
 
      
 
     dataType: 'json', 
 
     done: function (e, data) { 
 
      $.each(data.result.files, function (index, file) { 
 
       $('<p/>').text(file.name).appendTo("#fileList"); 
 
      }); 
 
     } 
 
    }); 
 
    $("#adminDate").datepicker({ 
 
    //dateFormat: 'dd/mm/yy', 
 
    dateFormat: 'yy-mm-dd', 
 
    showButtonPanel: true, 
 
    changeMonth: true, 
 
    changeYear: true 
 
    });

<form id="uploadForm" class="uploadForm" action="upload" method="post" enctype="multipart/form-data"> 
 

 
     <div class="form-group col-sm-offset-2"> 
 
      <label class="control-label col-sm-2">Input Data File:</label> 
 
      <div class="col-sm-5"> 
 
       <input type="file" name="files[]" id="fileupload" class="file form-control" accept=".csv,.zip" multiple required> 
 
       <div class="help-block help-block-error "></div>                
 
      </div> 
 
     </div> 
 
     <div class="form-group col-sm-offset-2"> 
 
      <label class="control-label col-sm-2">Date:</label> 
 
      <div class="col-sm-5"> 
 
       <input type="text" name="adminDate" id="adminDate" class="adminDate form-control" required> 
 
       <div class="help-block help-block-error "></div> 
 
      </div> 
 
     </div> 
 
     <div class="form-group col-sm-offset-2"> 
 
      <label class="control-label col-sm-2">Files:</label> 
 
      <div class="col-sm-5" id="fileList"> 
 
      </div> 
 
     </div> 
 
     <div class="form-group col-md-12 text-center"> 
 
      <button type="submit" id="btnSubmit" class="btn btn-success">Submit & Export</button> 
 
      <img id="bx_loader" class="hidden" src = "<?php echo Url::base() ?>/images/bx_loader.gif" /> 
 
     </div> 
 

 

 
    
 
    </form>

Ich möchte dieses Formular abschicken, wenn Absenden & Export Schaltfläche geklickt wird. Ich kann sehen, dass ein Anruf erfolgreich meine Upload-Funktion gemacht wird

public function actionUpload(){ 

    //echo 'takjsdf;ljasd;fl';exit; 


    if(!empty($_FILES)) { 
     $_SESSION['adminDate'] = $_POST['adminDate']; 
     echo '<pre>' ; 
     print_r($_FILES['files']); 
     echo '</pre>'; 

    } 


} 

Das Problem ist, dass ich nur die zuletzt ausgewählte Datei in $ _FILES Array erhalten kann, möchte ich zusammen mit dem Datum, alle Dateien erhalten. Ich möchte auch Dateiuploads mit individuellen Fortschrittsbalken implementieren (für jede ausgewählte Datei), aber ich bleibe dabei.

Ich habe mir auch das Demo-Jquery-Datei-Upload-Plugin angesehen und kann so viele Ajax-Anfragen sehen wie die Anzahl der ausgewählten Dateien, aber das kann ich nicht in meinem Code erreichen.

Wie kann ich dieses isse lösen?

Answer 1

Dieser Teil des Codes Problem war es in

$("#btnSubmit").on('click', function() { 
      $("#bx_loader").removeClass('hidden');    
      $('#upload-parent-div').css("display", "block");   

      data.submit(); 
      resetProgressbar(); 

     }); 

gelöst mein Problem zu konvertieren.