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>

我的工作是

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

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

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

您可以在此处找到有关formData

的更多信息

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>

我已经详细介绍了一个带有弹簧mvc控制器的完整工作解决方案here

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

2 个答案: