Question

试用一个小的jquery插件，让用户体验html输入文件上传控件在浏览器中保持一致。它基本上是一个具有html输入控件的表单，它嵌套在隐藏的iframe中。

该插件公开了beforeUpload，afterUpload等事件，我能够正确连接这些事件。

以下是我如何调用afterUpload事件的示例。

$.fn.createUpload = function(config){
    //stuff

    $(myUploadIframe).load(function(){
        var doc = this.contentWindow.document;
        var txt = $(doc).text();

        //parse txt to get json results
        var result = frameWorkParser(txt);

        if(result.uploadSuccess){
            if(config.afterUpload){
                config.afterUpload(sender, result);
            }
        }
    });

    //other stuff
};

以下是我如何使用插件：

var config = {
    afterUpload: function(el, data){
        //set some hidden field
    },
    //other options
};
$('#btnSelectFile').createUpload(config);

如果我以某种方式调用嵌套表单（即iframe内部）提交方法，iframe会加载并且我能够成功调用afterUpload事件。

但这里的事情变得棘手。我试图在所有上传完成后执行一些逻辑。

$.doUploads = function (callback) {
    $('iframe').each(function () {
        if (this.id.indexOf('_uploadContainer') > -1) {
            var doc = this.contentWindow.document;
            doc.forms[0].submit();
        }
    });
    callback();
};

这里我正在迭代所有插件创建的iframe（为上传而创建）并调用嵌套表单提交方法。但此调用不会等待后续的iframe onload事件完成，而callback会执行。

我希望回调能够在我的插件的afterUpload事件后执行。如何做到这一点？

Answer 1

设置一些int变量（比如totaliframeloaded=0;），它会在每个iframe加载时递增。还会在每个iframe加载时调用回调函数。

在回调检查中，该int变量的长度是否等于$('iframe').length。

，当所有iframe都被加载时，这个条件会匹配

if(`totaliframeloaded==$('iframe').length){//all iframes are loaded
//callback coad
}else{
//do nothing/return
}

在所有iframe完成加载后执行回调

1 个答案: