精细上传器：验证失败时隐藏总进度条（和标签）

Question

我正在使用 Fine Upload (http://fineuploader.com/) 及其对应的total progress bar。

这是我的html：

<div id="totalProgress" class="qq-total-progress-bar-container-selector progress">
    <div class="qq-total-progress-bar-selector progress-bar progress-bar-success progress-bar-striped active" role="progressbar"></div>
</div>

上传文件时总进度条正常工作，上传完成后总进度条隐藏。

但我也在使用验证

    validation: {
        allowedExtensions: ['jpeg', 'jpg', 'png'],
        itemLimit: 5,
        sizeLimit: 5000000
    },

问题是验证失败后进度条仍然可见。比如我测试上传6张图片（验证错误），进度条依然可见。这可能是因为 html div 在验证错误后没有得到 css 类qq-hide：

.qq-hide {
    display: none;
}

如果文件被拒绝但它不起作用，我已经测试将它添加到我的 Fineuploader 函数中：

.on("REJECTED", function() {
        $('#totalProgress').addClass('qq-hide');
});

意外情况 1：验证通过

1. 上传前用qq-hide隐藏总进度。
2. 我上传了一个验证通过的文件，去掉qq-hide （进度条可见）
3. 上传完成后再次添加qq-hide（进度条 再次隐藏）。

意外情况 2：验证失败

1. 上传前用qq-hide隐藏总进度。
2. 我上传了一个未通过验证的文件（例如过大）， qq-hide 被移除（进度条可见）
3. 获取验证错误消息
4. qq-hide is not在验证错误后再次添加（进度 条仍然可见）。

Answer 1

注意以下from the API：

在 Fine Uploader UI 中，总进度条将在达到 100% 或不再有任何文件在进行中时隐藏。

因此，如果你定义总进度条如下（没有其他属性）：

<!-- Total progress bar -->
<div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
    <div class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
</div>

如果上传失败（例如由于验证错误），它将自动变为不可见。

请注意以下关于此行为的 (from the owner of Fine Uploader)：

qq-total-progress-bar-container-selector中除了qq-total-progress-bar-selector元素之外应该没有其他内容，因为progress-bar元素旨在消耗进度条容器中的所有空间。

如果您想添加其他取决于总进度条可见性的文本，您需要重新考虑您的设计，并可能观察 totalProgress 事件以在 DOM 中显示/隐藏该标签。

因此，例如，您可以监控进度条本身，然后在进度 > 0% 时添加标签。这可以通过使用progress events 来完成，这样只有在上传通过验证时才会添加您的标签。

我已经为您准备了一个工作 jsFiddle，其中包含 total 进度条和 individual 进度条。 如果qq total progress bar div 内没有其他内容，您可以看到它现在工作正常：

jsFiddle DEMO