ファインアップワーダーコアで正常にキャンセルする

Question

ファインアップワーダーで複数のアップローダーを実装しようとしています。私は自分のUIを構築しています。 意図したとおり基本的にそれが動作します（複数のファイルを選択する - うまくアップロード>） しかし、私はない：

1. FILE2
2. 削除FILE2を追加FILE1
3. を追加（）ID（キャンセルするために呼び出します） - > エラー：[ファインアップローダー5.11.8]図1は、VAないキャンセル
4. へのステータス変更は、最初のファイルがアップロードされつつあるが、その後、私は例外を取得FILE3

を追加しますアップロードするフタファイルID！ （削除/キャンセルされたファイルを参照） 3番目のファイルはもうアップロードされません。

$(document).ready(function() { 
    $messages = $('#messages'); 
    $("#uploader").fineUploader({ 
     uploaderType: 'basic', 
     element: $('#uploader'), 
     button: $('.img-upload-button'), 
     debug: true, 
     autoUpload: false, 
     multiple: true, 
     sizeLimit: 209715200, 
     request: { 
      endpoint: '/handler?action.uploadImage' 
     } 
    }).on('submit', function(event, id, fileName) { 
     $messages.html('<div id="file-' + id + '" class="alert" style="margin: 20px 0 0">onSubmit</div>'); 
     addBlock(id, fileName); 
    }).on('upload', function(event, id, fileName) { 
     $('#file-' + id).addClass('alert-info').html('<img src="/custom/img/fine-uploader/loading.gif" alt="Initializing. Please hold." style="width: auto;"> ' + 'Initializing ' + '“' + fileName + '”'); 
    }).on('progress', function(event, id, fileName, loaded, total) { 
     console.log('progress: ' + loaded); 
     if (loaded < total) { 
      progress = Math.round(loaded/total * 100) + '% of ' + Math.round(total/1024) + ' kB'; 
      $('#file-' + id).removeClass('alert-info').html('<img src="/custom/img/fine-uploader/loading.gif" alt="In progress. Please hold."> ' + 'Uploading ' + '“' + fileName + '” ' + progress); 
     } else { 
      $('#file-' + id).addClass('alert-info').html('<img src="/custom/img/fine-uploader/loading.gif" alt="Saving. Please hold."> ' + 'Saving ' + '“' + fileName + '”'); 
     } 
    }).on('complete', function(event, id, fileName, responseJSON) { 
     console.log('ID: '+id); 
     console.log('fileName: '+fileName); 
     if (responseJSON.success === true) { 
      $('#file-' + id).addClass('alert-info').html('<div>success</div>'); 
     } else { 
      $('#file-' + id).addClass('alert-info').html('<div>fail</div>'); 
     } 
    }).on('cancel', function(event, id, fileName) { 
     $('.block' + id).remove(); 
    }); 

EDIT：ボタンハンドラと ：

function addBlock(id, fileName) { 
    // inserts a file representation block dynamically 
    ... 
    insert button: <input class="img-delete" type="button" value="delete" data="' + id + '"> 
    ... 
    $('.file-list').on("click", ".img-delete", cancelBlock); 
} 
function cancelBlock() { 
    // removes a cancelled block 
    var id = $(this).attr("data"); 
    $("#uploader").fineUploader('cancel', id); 
} 

$('#trigger-upload').click(function() { 
    $('#uploader').fineUploader('uploadStoredFiles'); 
}); 

キャンセルブロックを正しく削除し、キャンセルするファイルIDのステータス更新も細かいです。

何が欠けているのですか？

• コア
• 伝統的なエンドポイント
• v5.11.8
• jqueryの2.2

Answer 1

ファインアップローダのAPIは、IDは番号であることを期待しています。 cancel methodへお電話を見てみましょう：

function cancelBlock() { 
    // removes a cancelled block 
    var id = $(this).attr("data"); 
    $("#uploader").fineUploader('cancel', id); 
} 

jQueryのattrメソッドは、常に文字列を返します。ここでも、ファインアップローダIDは数字です。 parseInt()を使用してこの文字列を数値にキャストできます。この問題を解決するには、あなたのcancelBlock方法ではなく、次のようになります。また

function cancelBlock() { 
    // removes a cancelled block 
    var id = parseInt($(this).attr("data")); 
    $("#uploader").fineUploader('cancel', id); 
} 

を、ファインアップローダを使用する場合は特に、jQueryのを放棄ご検討ください。絶対にno benefit to using Fine Uploader's jQuery wrapperとvery little benefit to using jQuery elsewhere, given the advancements in JavaScript and the web APIがあります。