jquery - 如何在 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

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

layoutTemplates: Allows you to configure all layout template settings within one property. The layout objects that can be configured are: main1, main2, preview, caption, and modal.

关于progress属性:

progress: the template for the progress bar when upload is in progress (for batch/mass uploads and within each preview thumbnail for async/single uploads). The upload progress bar when displayed within each thumbnail will be wrapped inside a container having a CSS class of file-thumb-progress. The following tags will be parsed and replaced automatically:

默认是这样的:

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}: will be replaced with the upload progress percentage.

您还可以查看msgProgress .

阅读 Material

Plugin Options