Question

上传者的社区！

我试图将精细上传者与神社（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按钮，以便如果上传者正在上传某些文件：
表单将不会被发送，它会等到所有上传完成后再将其与服务器收到的每个上传文件（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>

希望有帮助！

等到精简版上传者在提交表单之前提交所有文件

2 个答案: