Jquery 파일 업로드로 다중 파트 formData 업로드하기

양식이 있습니다. 그 안에 두 개의 입력 필드가 있습니다. 하나는 파일 유형 (여러 파일)이고 other는 날짜입니다. Jquery 파일 업로드로 다중 파트 formData 업로드하기

$('#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>

나는 & 내보내기 버튼을 클릭 제출이 양식을 제출합니다. 내가 호출이 성공적으로 내 업로드 기능

public function actionUpload(){ 

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


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

    } 


}

문제는 난 단지 $ _FILES 배열에서 마지막으로 선택한 파일을 얻을 수 있다는 것입니다으로 구성되어 있음을 볼 수있다, 나는 날짜와 함께 모든 파일을 싶어. 또한 (각 선택한 파일에 대한) 개별 진행 막대를 사용하여 파일 업로드를 구현하고 싶지만이 문제에 봉착했습니다.

또한 데모 jquery 파일 업로드 플러그인을 살펴보고 선택한 파일 수만큼 많은 아약스 요청을 볼 수 있지만 코드에서이를 달성 할 수 없습니다.

어떻게이 문제를 해결할 수 있습니까?

출처

2017-12-19 umair.ashfr

코드의이 부분은 내 모든 문제를 해결

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

      data.submit(); 
      resetProgressbar(); 

     });

로 변환 문제를했다.

출처

2017-12-20 06:02:21

Jquery 파일 업로드로 다중 파트 formData 업로드하기

답변

관련 문제