jQuery：在表单提交时使用 Blueimp File Upload 插件上传文件+数据答案

【问题标题】：jQuery:File+Data upload using Blueimp File Upload plugin on form submitjQuery：在表单提交时使用 Blueimp File Upload 插件上传文件+数据
【发布时间】：2014-01-22 11:33:29
【问题描述】：

我正在使用 Blueimp File Upload 插件来上传文件。假设我有以下形式：

<form id="myForm">
   <input type="text" name="n1" />
   <input type="text" name="n3" />
   <input type="text" name="n3" />
   <input type="file" name="files" id="file" style="display: none" multiple/>
   <button>Upload</button>
</form>

我的工作是

我想在使用点击上传按钮时上传文件+数据。我已经完成了自动文件上传，即在拖放或选择文件后上传文件。

但是对于这个我不知道该怎么做。对于这种情况，我可以举一些简单的例子吗？

【问题讨论】：

您好，您是否解决了这个问题，我正在提交文件和电子邮件地址，但我不确定如何从 PHP 端获取此电子邮件地址。我同时使用了 $_REQUEST['email'] 和 $_POST['email'] 但还没有成功。

标签： jquery blueimp

【解决方案1】：

你需要这样的东西：

var sendData= true;  
$('#file').fileupload({
   dataType : 'json',
   autoUpload : false,
   add : function(e,data){
      $("#myForm button").on("click",function(){
          if(sendData){
              data.formData = $("#myForm").serializeArray();              
              sendData = false;
          }

          data.submit();
      });
   },
   done: function(e,data){
       sendData = true;
   }
})

在这里你可以找到更多关于formData的信息

【讨论】：

问题是如果我选择 5 个文件，它会调用给定的url 5 次
每个文件都有一个 ajax 调用。所以你希望你只发送一次数据，例如第一个文件？
是的！我想一次性发送所有文件。有可能吗？因为我面临的问题是如果我有 5 个附件并且如果我提交表单，那么所有字段都会提交五次，即 n1 n2... 被服务器接收五次
@Manish 我用解决方法更新了我的答案，只在第一个 ajax 调用中发送数据。
不工作..它仍然为 3 个文件发送 3 个 ajax 调用，并且每次调用它发送表单数据，即相同的文本字段数据 3 次

【解决方案2】：

多文件上传，支持拖放和多浏览器支持，没有一些技巧是不可能的。

使用jquery文件上传插件，你可以将autoUpload设置为false，收集正在添加或删除的文件，然后在表单提交时，取消正常的提交请求。相反，您执行一个包含所有文件和表单内容的 ajax 调用。当 ajax 调用返回时，您可以重定向回您的视图页面等。

var filesList = new Array();
$(function () {
    $('#fileupload').fileupload({
        autoUpload: false,
     }).on('fileuploadadd', function (e, data) {
        $.each(data.files, function (index, file) {
            filesList.push(data.files[index]);
        });
    });
}
$("#uploadform").submit(function(event) {
    if (filesList.length > 0) {
        event.preventDefault();
        $('#fileupload').fileupload('send', {files: filesList})
            .complete(function (result, textStatus, jqXHR) { 
                // window.location='back to view-page after submit?'
            });
        } else {
            // plain default submit
        }
    });
});
[...]
<form id="uploadform" action="..." method="POST" enctype="multipart/form-data">
    <input type="text" name="dummy" placeholder="some other input field">
    <input id="fileupload" type="file" name="files" multiple="multiple">
</form>

我已经详细描述了一个使用 spring mvc 控制器的完全有效的解决方案here

【讨论】：