Blueimp 성공적인 Ajax 요청 후 Fileupload 트리거 제출 버튼

Question

blueimp의 파일 업로드 사용 Ajax 요청 성공 후 파일 업로드를 어떻게 트리거합니까? fileuploadsubmit을 실행하려고 시도했지만 데이터가 정의되지 않았다고 표시됩니다.

HTML :

<form id="add-project-form" method="post" action="http://localhost/project/add/"> 
    <p> 
     <label for="project">Project Name:</label> 
     <input id="project" class="input-text" type="text" name="name" /> 
    </p> 
    <p> 
     <label for="overview">Project Overview:</label> 
     <input id="overview" class="input-text" type="text" name="overview" /> 
    </p> 
    <p><input type="submit" value="Add Project" /> 
</form> 

<form id="logo-upload" method="post" action="http://localhost/project/upload/" enctype="multipart/form-data"> 
    <p> 
     <input type="file" name="logo" id="logo" /> 
    </p> 
</form> 

jQuery를 :

$('#logo-upload').fileupload({ 
    dataType: 'json', 
    maxNumberOfFiles: 1, 
    autoUpload: false 
}).on('fileuploadsubmit', function(e, data) { 
    console.log(data); 
}); 


$(document).on("submit", "#add-project-form", function(e) { 
    e.preventDefault(); 

    var data = $(this).serialize(); 
    var url  = $(this).attr("action"); 

    $.ajax({ 
     url: url, 
     data: data, 
     type: "post", 
     dataType: "json", 
     success: function(response) { 
      if(response && response.location != undefined) { 

       // I would want the upload to begin here 

      $('#logo-upload').fileupload().trigger('fileuploadsubmit'); 
      } 
     } 
    }); 
}); 

Answer 1

바인드 버튼에 기능을 제출하고 Ajax 요청 후 클릭을 강제로 : 다음은 초기 코드

$('#logo-upload').fileupload({ 
    dataType: 'json', 
    maxNumberOfFiles: 1, 
    autoUpload: false, 
    add : function(e,data){ 
      $("#uploadButton").on("click",function(){ 
       data.submit(); 
      }) 
      } 
}).on('fileuploadsubmit', function(e, data) { 
    console.log(data); 
}); 

$.ajax({ 
    url: url, 
    data: data, 
    type: "post", 
    dataType: "json", 
    success: function(response) { 
     if(response && response.location != undefined) { 
      $("#uploadButton").click(); 
     } 
    } 
});