等到fine-uploader提交完所有文件后再提交表单

Question

上传者社区！

我正在尝试将 fine-uploader 与 shrine(ROR) 集成。
我已经能够将图像上传到服务器端点。
为了最终存储上传的照片，我选择通过 ajax.

使用我现有的表格发送上传的照片信息（从服务器接收）

我现有的表格如下所示

<form id="myform" method="post" action="some_path">
    <input type="text" name="name"/>
    <input type="text" name="email"/>
    <input type="text" name="phone"/>
    <input type="password" name="password"/>
    <input type="submit" />
    Add some photos
    <div id="fine-uploader-gallery"></div>
</form>

我的上传器配置：

$(function() {

var fineuploader = new qq.FineUploader({
  element: document.getElementById("fine-uploader-gallery"),
  template: 'qq-template-gallery',
  debug: true,
  request: {
    endpoint: 'images/cache/upload',
    inputName: "file"

  },
  thumbnails: {
    placeholders: {
      waitingPath: "fine-uploader/placeholders/waiting-generic.png",
      notAvailablePath: "fine-uploader/placeholders/not_available-generic.png"

    }

  },
  validation: {
    allowedExtensions: ['jpeg', 'jpg', 'gif', 'png']

  }

  callbacks: {
    onComplete: maybe add the responseJSON to a local variable and send it later with the form via ajax.
    }
}


});

});

我的问题是：
如何拦截sumbit按钮，这样如果fine-uploader正在上传一些文件:
表单不会发送，它会等到所有上传完成，然后将其与从服务器收到的每个上传文件的信息（responseJSON）一起发送。
希望我的问题很清楚！

Answer 1

您可以通过侦听表单提交事件并在文件尚未上传时阻止默认浏览器操作来阻止提交表单。

document.getElementById('myForm')
   .addEventListener('submit', function(event) {
      var totalFiles = fineuploader.getUploads().length;
      var successfulUploads = fineuploader.getUploads({ 
         status: qq.status.UPLOAD_SUCCESSFUL 
      }).length;

      if (totalFiles !== successfulUploads) {
         event.preventDefault();
      }
   })

...请随意添加任何消息以提醒您的用户注意该问题。

Answer 2

我是这样做的（详见代码注释）：

var uploadcomplete = 0;

// function called by submit button
function go() {
    // start uploading files
    manualUploader.uploadStoredFiles();
    // check once per second if uploading has completed
    cksub = setTimeout(function() {checksubmit()},1000);
}

function checksubmit() {
    if (typeof(cksub) != 'undefined') clearTimeout(cksub)
    if (uploadcomplete == 0)
        cksub = setTimeout(function() {checksubmit()},1000)
    else 
        document.forms['qq-form'].submit() // submit form
}

然后在FineUploader对象中我定义了这个回调函数：

var manualUploader = new qq.FineUploader({
    element: document.getElementById('fine-uploader-manual-trigger'),
    callbacks: {
         onAllComplete: function() { uploadcomplete=1 } // updates global variable
    },        
    autoUpload: false
})

终于在 HTML:

<form name="qq-form">
    <div id="fine-uploader-manual-trigger"></div>
    <input type=button onClick='go()'>
<form>

希望对您有所帮助！

等到fine-uploader提交完所有文件后再提交表单

Wait until fine-uploader submits all files before submitting form

html

javascript

fine-uploader