jQuery的表单提交文件上传后， [英] Jquery Form Submission after file upload
问题描述
我意识到了问题的这种变化已经出现了很多次，但没有，我可以找到它回答这样的背景下这个问题。
我使用的是第三方fileuploader，它利用jQuery和给出了一个成功的回调文件上传完成时。
我想实现的是与文本字段的形式，随着fileuploader，它会在你点击提交，打完上传功能（文件开始上传与它的进度条），并等待继续提交表单之前成功的回调。
我要马上承认，我是个白痴与jQuery和它混淆了我完全，所以我很不能确定如何实现这一目标。
我的努力迄今只造成形式试图立即提交，而在文件上传过程中。
功能 manualuploader.uploadStoredFiles（）; 是立即上传点击该按钮时实例化。
该实例的文件上传如下jQuery的：
＆LT;形式的行动=的index.php的方法=邮报是enctype =的multipart / form-data的ID =上传＆GT;
＆LT; DIV ID =手动精细上传＆GT;＆LT; / DIV＆GT;
＆LT; DIV ID =triggerUpload级=BTN BTN-小学的风格=的margin-top：10px的;＆GT;
＆LT;输入类型=文本名称=文本框值=测试数据＆GT;
＆LT;输入名称=测试类型=按钮值=立即上传＆GT;
＆LT; / DIV＆GT;
＆LT; /形式GT;
＆所述;脚本的src =的http：//$c$c.jquery.com/jquery-latest.js＆GT;＆所述; /脚本＆GT;
＆所述;脚本的src =fineuploader-3.6.3.js＆GT;＆所述; /脚本＆GT;
＆LT;脚本＆GT;
$（文件）。就绪（函数（）{
VAR manualuploader =新qq.FineUploader（{
元素：$（'＃手动精细上传'）[0]，
请求： {
端点：'uploader.php
}，
autoUpload：假的，
文本： {
uploadButton：'＆LT;我类=图标加号图标白＆GT;＆LT; / I＆GT;选择文件
}
}）;
$（'＃triggerUpload）。点击（函数（）{
manualuploader.uploadStoredFiles（）;
}）;
}）;
＆LT; / SCRIPT＆GT;
我注意到你正在使用jQuery。你为什么不使用 jQuery的包装精细上传？
我会听的onComplete 回调这是一个上传完成后（SUCESSFUL与否）触发一次。当的onComplete 被激发，我们使其 submitForm（），其中包含了逻辑检查所有文件已提交成功。
中的逻辑相对简单：如果我们没有进行中的文件，也没有说有一个 qq.status 失败<文件/ code>那么我们可以继续提交表单。
另外，我听 OnCancel的回调，以确保表单将提交如果上传没成功，因而被取消了。
有更多的回调。我建议对回调还有的 API方法的。此外，我会看看精细上传的jQuery文档。
如果了解jQuery是你的问题，那么我建议你保持这的附近。
＆LT;脚本SRC =HTTP：//$c$c.jquery.com/jquery-latest.js＆GT;＆LT; / SCRIPT＆GT;
＆所述;脚本的src =fineuploader-3.6.3.js＆GT;＆所述; /脚本＆GT;
＆LT;形式的行动=的index.php的方法=后ID =上传＆GT;
＆LT;输入类型=文本名称=文本框值=测试数据＆GT;
＆LT; DIV ID =手动精细上传＆GT;＆LT; / DIV＆GT;
＆LT; DIV ID =triggerUpload级=BTN BTN-小学的风格=的margin-top：10px的;＆GT;
＆LT; / DIV＆GT;
＆LT; /形式GT;
$（文件）。就绪（函数（）{
$（＃triggerUpload）。点击（函数（）{
$（＃手动精细上传）fineUploader（'uploadStoredFiles'）。
}）;
功能submitForm（）{
如果（$（本）.fineUploader（'getInProgress'）== 0）{
VAR failedUploads = $（本）.fineUploader（'getUploads'，
{状态：qq.status.UPLOAD_FAILED}）;
如果（failedUploads.length == 0）{
//做任何其他形式的处理在这里
$（＃上传）提交（）。
}
}
};
//实例化一个精美上传实例：
$（＃手动精细上传）。fineUploader（{
autoUpload：假的，
请求： {
端点：/ uploads_bucket
}
}）上（完成功能（事件，ID，姓名，响应）{
submitForm.call（本）;
}）。在（'statusChange'，函数（事件ID，oldStatus，newStatus）{
如果（newStatus === qq.status.CANCELLED）{
submitForm.call（本）;
}
}）;
}）;
让我知道如果你有任何问题，我可以协助。
I realise this variation of question has appeared many times, but none that I can find which answer this question in this kind of context.
I am using a third party fileuploader, which utilises jQuery and gives a success callback when the file upload completes.
What I want to achieve is a form with text fields, along with the fileuploader, which when you click 'Submit', fires off the upload function (and the file begins to upload with it's progress bar), and waits for the success callback before proceeding to submit the form.
I have to admit immediately that I am a complete idiot with jQuery and it confuses me utterly, so I am very unsure how to achieve this.
My attempts thus far only result in the form attempting to submit immediately while the file upload is in progress.
The function manualuploader.uploadStoredFiles(); is instantiated when clicking the 'Upload now' button.
The jQuery which instantiates the file uploader is as follows:
<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>
I noticed you're using jQuery. Why don't you use the jQuery wrapper for Fine Uploader?
I would listen to the onComplete callback which is fired once an upload finishes (sucessful or not). When onComplete is fired we make it to submitForm() which contains the logic for checking that all the files have been submitted successfully.
The logic is relatively simple: if we have no files in progress and there are no files that have a qq.status of FAILED then we can proceed to submit the form.
Also, I listen to the onCancel callback to make sure that the form will submit if uploads did not succeed and thus were cancelled.
There are many more callbacks. I'd suggest reading up on the Fine Uploader docs on callbacks as well as API methods. Furthermore, I would look at the Fine Uploader jQuery docs.
If understanding jQuery is your problem then I'd suggest keeping this nearby.
<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.CANCELLED) {
submitForm.call(this);
}
});
});
Let me know if you have any more questions that I can assist with.
这篇关于jQuery的表单提交文件上传后，的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
