Làm cách nào để tải lên dữ liệu tệp + biểu mẫu bằng Tải lên tệp JQuery của blueimp bằng Ajax, không chỉ POST?

Question

Tôi có một hình thức:

<div class="row-fluid"> 

    <div class="span5 row-fluid" id="description" style="margin-left:0px;"> 
     <div> 
      <label>Title</label> 
      <input class="span12" type="text" placeholder="Title" id="description_title" name="description_title"/> 
      <label>Author</label> 
      <input class="span12" type="text" placeholder="Author" id="description_author" name="description_author"/> 
      <label>Tags</label> 
      <input class="span12" type="text" placeholder="Tags" id="description_tags" name="description_tags"/> 
      <label>Description</label> 
      <textarea class="span12" id="description_textarea" name="description_textarea" rows="5" style="resize:none"></textarea> 

      <div id="buttons" class="row-fluid" style="margin-top: 5px"> 
       <div class="span12"> 
       <span class="span5 btn btn-primary btn-file" id="chose_files_btn" onclick="filechose_button.click()">chose files 
        <input id="filechose_button" type="file" name="fileData" data-url="http://localhost:3001/upload/1234567890"/></span> 
       <button id="upload_button" type="submit" name="upload" class="span5 offset2 btn btn-success" disabled="true" onclick="$('#upload_form').trigger('upload_fired');">upload</button> 
       </div> <!-- span12 --> 
      </div> <!-- buttons --> 
     </div> <!-- well --> 
    </div> <!-- video_description --> 
    </div> <!-- row-fluid --> 

Làm thế nào tôi có thể tích hợp một JQuery Tải lên Plugin theo cách như vậy, mà sau khi chọn một tập tin với filechose_button tôi có thể cho phép các upload_button và gửi tất cả các trường và tệp đầu vào sử dụng AJAX, không giống như nó hoạt động bây giờ chỉ cần tải lại trang sau khi yêu cầu POST.

js để tải lên là:

$(function() { 
    $('#filechose_button').fileupload({ 
     dataType: 'json', 
     add: function (e, data) { 
      data.context = $('#upload_button'); 
       $('#upload_button').click(function() { 
        data.submit(); 
       }); 
     }, 
     done: function (e, data) { 
      data.context.text('Upload finished.'); 
     } 
    }); 
}); 

nhưng vẫn còn đó gửi dữ liệu không sử dụng AJAX

Answer 1

Vấn đề là hành vi mặc định của phần tử <button> của biểu mẫu. Việc loại bỏ các thuộc tính type="submit" không thay đổi bất cứ điều gì. Vì vậy, thay vì kích hoạt chức năng của riêng tôi, hãy button gửi số form thông qua yêu cầu thông thường POST.

Answer 2

@Pere: Đảm bảo rằng bạn không sử dụng các nút trong biểu mẫu của mình. Tôi đã giải quyết nó bằng cách sử dụng div's với lớp btn bootstrap. Đây là mã javascript của tôi:

//this should not be a <button></button>, but a div 
var submitbtn = $("#submitbtn"); 


//upload an image && form submission 
     $('#avatar').fileupload({ 
      singleFileUploads: true, 
      multipart  : true, 
      dataType   : 'json', 
      autoUpload  : false, 
      url    : 'yourEndpoint', 
      type    : 'POST', 
      add    : function (e, data) { 
       submitbtn.on("click", function() { 

        data.formData = $("#form-activate-user").serializeArray(); 
        data.submit(); 


       }); 
      }, 
      done    : function (result) {} 
      }, 
      fail    : function (e) {}