1

私は Transloadit を実装していますが、 onStart() を除いてすべてがうまく機能します。ただし、onSuccess() はすべての onStart() の後に実行されるため、複数回実行され、同じ画像がページに複数回追加されることがあります。

Transloadit アカウントのアセンブリ ログを見ると、onSuccess() が実行された回数と一致する複数の重複したアセンブリが表示されます。

Transloadit プラグインが onStart() と onSuccess() を複数回実行するのはなぜですか? waitこれによりtrue、すべてのファイルが処理された後に onSuccess() が 1 回だけ起動されます (ファイルのアップロードは 1 つだけ許可されます)。

画像のアップロードが開始されると進行状況バーが 1 つ表示され、その後 onSuccess() が 1 回、2 回、場合によっては 3 ～ 4 回実行されます。

更新 1: 2 つの進行状況バーが重なっていることに気付きました。そのため、プラグインが 2 回実行されています。

更新 2: 画像がアップロードされるたびに、プラグインが再度バインドされます。#1 をアップロードした後、onSuccess() が 2 回起動します。#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 に答える