我意识到这个问题的变体已经出现了很多次,但是我找不到在这种情况下能回答这个问题的人。
我正在使用第三方fileuploader,该文件利用jQuery并在文件上传完成时给出成功回调。
我要实现的是一个带有文本字段的表单以及fileuploader,当您单击“提交”时,该表单将触发上传功能(文件开始使用进度条开始上传),并等待成功回调之前继续提交表格。
我必须立即承认我是jQuery的白痴,这使我完全困惑,所以我不确定如何实现这一点。
到目前为止,我的尝试仅导致表单尝试在文件上载时立即提交。
manualuploader.uploadStoredFiles();单击“立即上传”按钮时,将实例化该功能。
manualuploader.uploadStoredFiles();
实例化文件上传器的jQuery如下:
<form action="index.php" method="post" enctype="multipart/form-data" id="uploader"> <div id="manual-fine-uploader"></div> <div id="triggerUpload" class="btn btn-primary" style="margin-top: 10px;"> <input type="text" name="textbox" value="Test data"> <input name="test" type="button" value="Upload now"> </div> </form> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="fineuploader-3.6.3.js"></script> <script> $(document).ready(function() { var manualuploader = new qq.FineUploader({ element: $('#manual-fine-uploader')[0], request: { endpoint: 'uploader.php' }, autoUpload: false, text: { uploadButton: '<i class="icon-plus icon-white"></i> Select Files' } }); $('#triggerUpload').click(function() { manualuploader.uploadStoredFiles(); }); }); </script>
我注意到您正在使用jQuery。您为什么不将jQuery包装器用于Fine Uploader?
我将收听onComplete上载完成(成功与否)后触发的回调。当onComplete被触发时,我们将在submitForm()其中包含用于检查所有文件是否已成功提交的逻辑。
onComplete
submitForm()
逻辑相对简单:如果我们没有正在进行的文件,也没有文件包含qq.status,FAILED那么我们可以继续提交表单。
qq.status
FAILED
另外,我会侦听onCancel回调,以确保如果上传不成功并因此被取消,则表单将提交。
onCancel
还有更多的回调。我建议阅读有关回调以及API方法的Fine Uploader文档。此外,我将看一下Fine Uploader jQuery docs。
如果了解jQuery是您的问题,那么建议您将其保留在附近。
<script src="http://code.jquery.com/jquery-latest.js"></script> <script src="fineuploader-3.6.3.js"></script> <form action="index.php" method="post" id="uploader"> <input type="text" name="textbox" value="Test data"> <div id="manual-fine-uploader"></div> <div id="triggerUpload" class="btn btn-primary" style="margin-top: 10px;"> </div> </form> $(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); } }); });
让我知道您是否还有其他需要协助的问题。