jquery - FineUploader 淡入淡出每一行

Question

我正在尝试使用fineUploader，但遇到了问题。这个问题确实是因为我不太熟悉 jQuery，所以如果这是一个愚蠢的问题，我很抱歉。

下面是我的代码。我想淡出在fineUploader中成功加载的每一行，以便在上传结束时出现的所有内容都是原始上传按钮或失败的上传。如果你上传 1000 个文件，它看起来真的很俗气，每个上传的图像都有 1000 行绿色框。我喜欢 Uploadify 的工作方式，而最后以这种方式上传后，每一行都会慢慢淡出，没有上传的图像行。谁能为我建议一个解决方案？谢谢!

This is the container which jQuery loads each success or failed row into...
<ul id="basicUploadFailureExample" class="unstyled"></ul>

$(document).ready(function() {
var errorHandler = function(event, id, fileName, reason) {
    qq.log("id: " + id + ", fileName: " + fileName + ", reason: " + reason);
};

var uploader3 = new qq.FineUploader({
    element: $('#basicUploadFailureExample')[0],
    callbacks: {
        onError: errorHandler,
        onComplete: function(id, fileName, responseJSON) {
            if (responseJSON.success == true) {
                            // I would think the fade out would go here but I am just not sure... 
            } 
        }
    },
    request: {
        endpoint: "../server/php/example.php",
        params: {"generateError": true}
    },
    failedUploadTextDisplay: {
        mode: 'custom',
        maxChars: 5
    }
}); 

});

Answer 1

实际上，这相当容易做到，而且您的想法是正确的，您只是缺少一个关键的 API 函数。

您的代码应如下所示(只需添加/更改一行):

var uploader3 = new qq.FineUploader({
    element: $('#basicUploadFailureExample')[0],
    callbacks: {
        onError: errorHandler,
        onComplete: function(id, fileName, responseJSON) {
            if (responseJSON.success == true) {
               $(this.getItemByFileId(id)).hide('slow');
            } 
        }
    },
    request: {
        endpoint: "../server/php/example.php",
        params: {"generateError": true}
    },
    failedUploadTextDisplay: {
        mode: 'custom',
        maxChars: 5
    }
}); 

我添加到 onComplete 处理程序中的一行调用 getItemByFileId 函数，该函数返回包含 UI 中显示的文件详细信息的元素。只需隐藏它，或对其执行一些其他动画，最终将其隐藏。

顺便说一句，我认为这是一个很酷的主意(淡出所有失败的上传)。