javascript - 精细上传者: hide total progress bar (and label) upon validation fail

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(进度 栏仍然可见)。

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 总进度条 div 内没有其他内容，现在它可以正常工作了:

jsFiddle DEMO