[英]Jquery Form Submission after file upload
我意识到问题的这种变化已经多次出现,但是在这种情况下我找不到哪个能回答这个问题。
我正在使用第三方fileuploader,它利用jQuery并在文件上传完成时提供成功回调。
我想要实现的是一个带有文本字段的表单,以及fileuploader,当你点击“提交”时,它会触发上传功能(文件开始上传它的进度条),然后等待成功回调继续提交表格。
我必须立刻承认我是一个完全白痴的jQuery,它让我完全迷惑,所以我很不确定如何实现这一目标。
到目前为止,我的尝试只会导致表单尝试在文件上载过程中立即提交。
函数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()
,其中包含用于检查所有文件是否已成功提交的逻辑。
逻辑相对简单:如果我们没有正在进行的文件,并且没有文件的qq.status
为FAILED
那么我们可以继续提交表单。
另外,我收听onCancel
回调以确保如果上传没有成功则表单将被提交,因此被取消。
还有更多的回调。 我建议阅读关于回调以及API方法的Fine Uploader文档。 此外,我会看看Fine Uploader jQuery文档 。
如果理解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);
}
});
});
如果您有任何其他我可以提供帮助的问题,请与我们联系。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.