1

我正在实现 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');
    }
}
4

1 回答 1

0

问题是每次 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');
    }

}
于 2016-02-11T08:11:23.690 回答