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>

我的工作是

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

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

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控制器详细描述了一个完全工作的解决方案