Question

我正在实现Transloadit，一切都很好，除了onStart（），它有时会多次执行，导致同一个图像被多次添加到我的页面，因为onSuccess（）在每个onStart（）之后运行。

在我的Transloadit帐户中查看程序集日志时，我看到多个重复的程序集与onSuccess（）运行的次数相匹配。

为什么Transloadit插件多次执行onStart（）和onSuccess（）？ wait设置为true，只有在处理完所有文件后才会触发onSuccess（）一次（我只允许上传一个文件）。

我在图像上传开始时看到一个进度条，之后onSuccess（）运行一次，两次或有时三到四次。

更新1：注意到两个进度条重叠，因此插件正在运行两次。

更新2：每次上传图片时，插件都会再次绑定。上传＃1后，onSuccess（）会触发两次。上传＃2后，它会触发三次，依此类推。似乎我每次使用插件后都必须取消绑定。

首先，加载库：

<script src='https://assets.transloadit.com/js/jquery.transloadit2-v2-latest.js' type='text/javascript'></script>

页面上的代码。选择文件后，单击按钮执行getStarted（）。

getStarted = function(){

    var form = $("#form_image");

    if(jQuery().transloadit) {

        form.transloadit({
            wait: true,
            autoSubmit: false,
            processZeroFiles: false,
            params: {
                auth: {key: '123456789'},
                template_id: '123456789'
                },
            onStart: function(){
                console.log('transloadit started');
            },
            onUpload: function(){
                console.log('transloadit upload started');
            },
            onProgress: function(bytesReceived, bytesExpected) {
                console.log('bytesReceived: '+bytesReceived);
            },
            onSuccess: function(assembly) {
                console.log('transloadit success');
                addImageToPage(assembly);
            },
            onError: function(assembly) {
                console.log('transloadit failed');
            }
        });

    form.trigger('submit.transloadit');
    }
}

Answer 1

问题是每次运行getStarted（）时，transloadit（）都会反复绑定到同一个表单。通过检查插件是否已被绑定，我可以避免再次绑定。

getStarted = function(){

    var form = $("#form_image");

    //checking whether plugin is already bound
    var uploader = form.data('transloadit.uploader');

    if(jQuery().transloadit && !uploader) {

        form.transloadit({...});
        form.trigger('submit.transloadit');
    }
    else if(jQuery().transloadit && uploader) {
        form.trigger('submit.transloadit');
    }

}

Transloadit多次触发onStart

1 个答案: