3

我正在尝试使用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
    }
}); 

});

4

1 回答 1

4

实际上,这很容易做到,而且您的想法是正确的,您只是缺少一个关键的 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 中显示的文件详细信息的元素。只需将其隐藏,或对其执行一些其他动画,最终将其隐藏。

顺便说一句,我认为这是一个很酷的想法(淡出所有上传失败的内容)。

于 2013-03-10T04:49:13.910 回答