正確取消罰款上傳核心

Question

我想實現一個多上傳與罰款上傳。我正在爲它建立我自己的用戶界面。 基本上它按預期工作（選擇多個文件 - >上傳就好了） 但是當我做：

1. 添加文件1
2. 添加文件2
3. 刪除文件2（呼叫取消（ID）） - >狀態更改爲取消
4. 添加文件3

第一個文件是越來越上傳，但後來我得到一個異常： 錯誤：[精細上傳5.11.8] 1不是一個VA上傳文件ID！ （其中指出刪除/取消的文件） 第三個文件不再上傳。

$(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(); 
    }); 

編輯： 與按鈕處理程序：

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。