Transloadit 多次触发 onStart答案

【问题标题】：Transloadit fires onStart multiple timesTransloadit 多次触发 onStart
【发布时间】：2016-02-11 16:11:23
【问题描述】：

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

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

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

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

更新1：刚刚注意到两个进度条重叠，所以插件运行了两次。

更新2：每次上传图片时，都会重新绑定插件。上传 #1 后，onSuccess() 触发两次。上传 #2 后，它会触发 3 次，依此类推。好像每次用完都得解绑插件。

首先，加载库：

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

【问题讨论】：

标签： javascript transloadit

【解决方案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');
    }

}

【讨论】：