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

【问题标题】：Wait until fine-uploader submits all files before submitting form等到fine-uploader提交所有文件后再提交表单
【发布时间】：2016-09-25 16:48:34
【问题描述】：

上传者社区！

我正在尝试将精细上传器与神社（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）。
希望我的问题很清楚！

【问题讨论】：

为什么您的表单元素内部有很好的上传器渲染？这似乎不正确。
我不知道？有什么具体原因吗？我不介意更改我的代码。
我当然不知道原因。这是你的代码，不是吗？
这是我的代码！但你说在表单标签内呈现精细上传器似乎不正确，所以我只想知道为什么要更改它！
"为什么在我的表单中呈现 Fine Uploader 似乎不正确？"因为它不是表单域。

标签： javascript html fine-uploader

【解决方案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();
      }
   })

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

【讨论】：

【解决方案2】：

我是这样做的（详见代码中的 cmets）：

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>

希望对你有帮助！

【讨论】：