javascript - Transloadit 多次触发 onStart

Question

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

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

为什么Transloadit插件会多次执行onStart()和onSuccess()？ wait 设置为 true，这应该使 onSuccess() 在处理完所有文件后仅触发一次(我只允许上传一个文件)。

当图像上传开始时，我会看到一个进度条，之后 onSuccess() 运行一次、两次，有时甚至三到四次。

更新 1:刚刚注意到两个进度条重叠，因此插件运行了两次。

更新2:每次上传图片时，都会重新绑定(bind)插件。上传 #1 后，onSuccess() 会触发两次。上传 #2 后，它会触发 3 次，依此类推。看来我每次使用插件后都必须解除绑定(bind)。

首先，加载库:

<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() 都被一遍又一遍地绑定(bind)到同一个表单。通过检查插件是否已经绑定(bind)，我可以避免它再次被绑定(bind)。

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

}