如何在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 ：允許您在一個屬性中配置所有布局模板設置。 可以配置的布局對象是： 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 。

閱讀材料

插件選項