jquery - 如何使用 Ajax 使用 blueimp 的 JQuery 文件上传上传文件 + 表单数据，而不仅仅是 POST？

Question

我有一个表格:

  <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 -->

如何以这样的方式集成 JQuery 上传插件，在使用 filechose_button 选择文件后，我可以启用 upload_button 并发送所有输入字段和文件( s) 使用 AJAX，不像现在只在 POST 请求后重新加载页面。

上传的js是:

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

但它仍然不使用 AJAX 发送数据

Answer 1

问题是 <button> 的默认行为表单的元素。删除属性 type="submit"不会改变任何东西。因此，button 不是触发我自己的函数，而是发送form通常通过 POST请求。