Blueimp文件上传触发一个成功的Ajax请求

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(); 
     } 
    } 
});