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

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

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。

阅读材料

Plugin Options

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

1 个答案: