需要FineUploader方法uploadStoredFiles才能在继续之前完成

时间:2013-12-10 22:38:03

标签: javascript jquery angularjs asynchronous fine-uploader

对于某些快速背景,uploadStoredFiles()是FineUploader插件中用于将附加文件数据异步发送到服务器路径的方法。我也在为我的应用程序使用AngularJS。我的问题实际上与这里发现的问题非常相似......

jQuery: wait for function to complete to continue processing?

...最大的区别在于我无法访问回调函数本身。此外,我的脚本运行FineUploader作为一个更大的表单的一部分,其中附件是可选的,所以使用FineUploader'完成'回调也无济于事。

这是一个代码示例。基本上,如果没有附件,那么页面应该重新加载。如果有附件,则应上传,然后重新加载页面。

if(hasAttachments)
{
    myuploader.uploadStoredFiles();
}

//AngularJS call to refresh page
$route.reload();

大多数情况下,页面会刷新自身并且文件在其列表中丢失,直到我稍后再进行额外刷新。我可以对等待时间进行硬编码,但有些事情看起来既低效又邪恶。

欢迎任何建议或解决方案。我特别喜欢Angular-ish解决方案,但我会采取我能得到的东西。

1 个答案:

答案 0 :(得分:2)

我尝试将我的评论总结为一个有凝聚力的答案:

Fine Uploader具有在发生某些事情时运行代码的事件,例如文件提交到上传者(onSubmit)或文件上传时(onComplete)。

vanilla JavaScript看起来像,

$(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);
        } 
    });
});

您可以使用this Angluar example作为制作Fine Uploader指令的起点。