文件上传后的Jquery表单提交

我意识到问题的这种变化已经出现了很多次，但是在这种情况下我找不到哪个能回答这个问题。

我正在使用第三方fileuploader，它利用jQuery并在文件上传完成时提供成功回调。

我想要实现的是一个带有文本字段的表单，以及fileuploader，当你点击“Submit”时，它会触发上传function（文件开始上传它的进度条），然后等待成功回调继续提交表格。

我必须立刻承认我是一个完全白痴的jQuery，它让我完全迷惑，所以我很不确定如何实现这一目标。

到目前为止，我的尝试只会导致在文件上传过程中尝试立即提交的表单。

函数manualuploader.uploadStoredFiles(); 单击“立即上传”按钮时实例化。

实例化文件上传器的jQuery如下：

 
 
 
   
 
    $(document).ready(function() { var manualuploader = new qq.FineUploader({ element: $('#manual-fine-uploader')[0], request: { endpoint: 'uploader.php' }, autoUpload: false, text: { uploadButton: ' Select Files' } }); $('#triggerUpload').click(function() { manualuploader.uploadStoredFiles(); }); });  

Answer 1

我注意到你正在使用jQuery。 为什么不使用jQuery包装器进行Fine Uploader ？

我会听一下上传完成后触发的onComplete回调（成功或不成功）。 当onComplete被触发时，我们将其设置为submitForm() ，其中包含用于检查所有文件是否已成功提交的逻辑。

逻辑相对简单：如果我们没有正在进行的文件，并且没有文件的qq.status为FAILED那么我们可以继续提交表单。

另外，我听取onCancel回调以确保表单将在上传未成功时提交，因此被取消。

还有更多的回调。 我建议阅读关于回调以及API方法的Fine Uploader文档。 此外，我会看看Fine Uploader jQuery文档 。

如果了解jQuery是你的问题，那么我建议保持这个附近。

   
  
 
 
 
 $(document).ready(function() { $("#triggerUpload").click(function () { $("#manual-fine-uploader").fineUploader('uploadStoredFiles'); }); function submitForm () { if ($(this).fineUploader('getInProgress') == 0) { var failedUploads = $(this).fineUploader('getUploads', { status: qq.status.UPLOAD_FAILED }); if (failedUploads.length == 0) { // do any other form processing here $("#uploader").submit(); } } }; // Instantiate a Fine Uploader instance: $("#manual-fine-uploader").fineUploader({ autoUpload: false, request: { endpoint: "/uploads_bucket" } }).on("complete", function (event, id, name, response) { submitForm.call(this); }).on('statusChange', function (event, id, oldStatus, newStatus) { if (newStatus === qq.status.CANCELED) { submitForm.call(this); } }); }); 

如果您有任何其他问题需要我帮助，请与我们联系。