Fine uploader：在验证失败时隐藏总进度条（和标签）

Question

我正在使用精细上传 (http://fineuploader.com/) and its corresponding 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 class qq-hide：

.qq-hide {
    display: none;
}

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

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

意外情况 1：验证通过

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

意外情况 2：验证失败

上传前用qq-hide隐藏总进度
我上传的文件没有通过验证（例如大）， qq隐藏已移除（进度条可见）
获取验证错误消息
qq-hide是未验证错误后再次添加（进度栏仍然可见）。

Answer 1

注意以下内容from the API：

In Fine Uploader UI, the total progress bar will be hidden once it reaches 100%, or once there are no longer any files in progress.

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

<!-- 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)：

There should be no content inside the qq-total-progress-bar-container-selector other than the qq-total-progress-bar-selector element as the progress-bar element is intended to consume all of the space in the progress-bar-container.

If you want to add other text that is dependent on the visibility of the total progress bar, you'd need to rethink your design a bit, and perhaps observe the totalProgress event to show/hide that label in the DOM.

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

我已经为您准备了一个可以工作的 jsFiddle，其中包含总计进度条和个人进度条。你可以看到它现在工作正常，如果 qq total progress bar div:

中没有其他内容

Fine uploader：在验证失败时隐藏总进度条（和标签）

Fine uploader: hide total progress bar (and label) upon validation fail

javascript

jquery

fine-uploader

jsFiddle DEMO