jQuery：在表单提交时使用Blueimp文件上传插件上传文件和数据

Question

我正在使用Blueimp文件上传插件来上传文件。假设我有以下表单：

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

我的工作是

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

但对于这个问题，我不知道该怎么做。我能否得到这种情况的一些简单示例？

- Manish Kumar

---

你好，你解决了吗？我正在提交文件和电子邮件地址，但我不确定如何从PHP端获取此电子邮件地址。我尝试使用$_REQUEST['email']和$_POST['email']，但仍未成功。 - fanbondi

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

here you can find more information about formData

- Dirty-flow

---

问题是如果我选择了5个文件，它会5次调用给定的url。 - Manish Kumar

每个文件都有一个Ajax调用。所以你希望只发送数据一次，例如使用第一个文件？ - Dirty-flow

是的！我想一次性发送所有文件。这可能吗？因为我面临的问题是，如果我有5个附加文件，并且如果我提交表单，则所有字段都会被提交五次，即服务器会收到n1 n2...五次。 - Manish Kumar

@Manish 我更新了我的答案，并提供了一个解决方法，只在第一个ajax调用中发送数据。 - Dirty-flow

不起作用。它仍然会为3个文件发送3个ajax调用，并且每个调用都会发送表单数据，即相同的文本字段数据3次。 - Manish Kumar

Answer 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控制器，详情请点击这里

- Tor