在文件上传后提交Jquery表单

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.

我正在使用一个第三方文件上传器，它使用jQuery，并在文件上传完成时给出一个成功的回调。

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.

我想要实现的是一个带有文本字段的表单，以及fileuploader，当您单击“提交”时，它会触发upload函数(文件开始用它的进度条进行上传)，并在提交表单之前等待成功回调。

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.

我必须马上承认，我是一个彻头彻尾的jQuery白痴，它让我非常困惑，所以我不确定如何实现它。

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.

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

The jQuery which instantiates the file uploader is as follows:

实例化文件上传器的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>

1 个解决方案

#1

I noticed you're using jQuery. Why don't you use the jQuery wrapper for Fine Uploader?

我注意到你在使用jQuery。为什么不使用jQuery包装器进行高级上传呢?

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.

我将监听onComplete回调，一旦上传完成(不管成功与否)就会触发该回调。当onComplete启动时，我们将它设置为submitForm()，它包含检查所有文件是否已成功提交的逻辑。

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.

逻辑相对简单:如果我们没有正在处理的文件，也没有带有qq的文件。失败状态，然后我们可以继续提交表格。

Also, I listen to the onCancel callback to make sure that the form will submit if uploads did not succeed and thus were cancelled.

另外，我监听onCancel回调，以确保在上传失败并因此被取消时，表单将提交。

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.

还有更多的回调。我建议您阅读关于回调和API方法的优秀的上传者文档。此外，我还将研究优秀的jQuery文档上传器。

If understanding jQuery is your problem then I'd suggest keeping this nearby.

如果理解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);
        } 
    });
});

Let me know if you have any more questions that I can assist with.

如果你还有什么问题需要我帮忙的话，请告诉我。

#1