7

我有这个 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

如何设置进度条以显示进度百分比？当文件实际被上传并且文件正在被处理时？

4

1 回答 1

4

根据文档，您可以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。

阅读材料

插件选项

于 2018-06-21T13:08:47.647 回答