如何使用 Ajax 上传带有 blueimp 的 JQuery File Upload 的文件 + 表单数据，而不仅仅是 POST？答案

【问题标题】：How can I upload a file + form data with blueimp's JQuery File Upload using Ajax, not just POST?如何使用 Ajax 上传带有 blueimp 的 JQuery File Upload 的文件 + 表单数据，而不仅仅是 POST？
【发布时间】：2013-04-22 11:33:37
【问题描述】：

我有一个表格：

  <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 并使用 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 发送数据

【问题讨论】：

您可以使用 fileupload 来提交 fileupload 和其他表单数据：github.com/blueimp/jQuery-File-Upload/wiki/…
:) 我来自那个页面。我在阅读该手册后编写了这段代码，但我有一个问题，表单将被同步发送，而不是 AJAX。 data.submit(); 不通过 AJAX 执行
您应该将您的输入包装在一个表单中，并根据该表单的 ID 创建文件上传，而不是针对输入字段创建文件上传。
你可以用data.submit();代替$(this).fileupload('send', data);
解决了！按钮元素的 type 属性的默认值为“submit”。这对我来说有点奇怪：我明确地删除了这个标签，而不是按钮什么都不做，而是触发我自己的功能并且默认情况下不提交表单。感谢您的讨论，这是真正需要找出问题所在！

标签： jquery ajax post file-upload blueimp

【解决方案1】：

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

【讨论】：

或者你可以添加type="button"

【解决方案2】：

@Pere：确保您不在表单中使用按钮。我通过将 div 与 bootstrap btn 类一起使用来解决它。这是我的 JavaScript 代码：

//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) {}

【讨论】：