如何在bootstrap-fileinput插件中显示进度？

Question

我有这个JavaScript代码:

$("#uploadFile").fileinput({
    uploadUrl: url,
    maxFilePreviewSize: 10240,
    allowedFileExtensions: ["xls", "xlsx", "csv"],
    maxFileCount: 1,
    language: 'es',
    theme: 'gly',
    autoReplace: true,
    maxFileSize: 4096,
    required: true,
    browseOnZoneClick: true
});

$('#uploadFile').on('fileuploaded', function(event, data, previewId, index) {
    var form = data.form,
      files = data.files,
      extra = data.extra,
      response = data.response,
      reader = data.reader;
    DisplayResults(response);
});

bootstrap-fileinput有效,但在处理时没有显示进度.它仅显示上传文件时完全绘制了"处理..."文本的进度条,并在POST返回时更改为"完成"文本.

我正在使用这个插件:http://plugins.krajee.com/file-input

如何设置进度条以显示进度百分比？文件实际上传和文件处理时？

Answer 1

根据文档，您可以progress在以下位置设置属性layoutTemplates：

layoutTemplates：允许您在一个属性内配置所有布局模板设置。可以配置的布局对象有：main1、main2、preview、caption和modal。

关于progress财产：

progress：上传正在进行时的进度条模板（对于批量/批量上传以及在异步/单次上传的每个预览缩略图中）。当在每个缩略图中显示时，上传进度条将被包装在 CSS 类为 的容器内file-thumb-progress。以下标签将被自动解析和替换：

默认是这样的：

progress: '<div class="progress">\n' +
    '    <div class="progress-bar progress-bar-success progress-bar-striped text-center" role="progressbar" aria-valuenow="{percent}" aria-valuemin="0" aria-valuemax="100" style="width:{percent}%;">\n' +
    '        {status}\n' +
    '     </div>\n' +
    '</div>',

这就是为什么您只看到“处理中”和“完成”。但是，如果替换{status}为{percent}它将呈现百分比。再次，根据文档：

{percent}：将替换为上传进度百分比。

您还可以查看msgProgress.

阅读材料

插件选项