jQuery:使用表单提交上的Blueimp文件上传插件上传文件+数据

我正在使用Blueimp文件上传插件上传文件。 假设我有以下forms:

我的工作是

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

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

你需要这样的东西:

 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的更多信息

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

使用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 } }); }); [...] 

我在这里详细介绍了一个带有弹簧mvc控制器的完全可行的解决方案