Transloadit多次触发onStart

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');
    }

}