如何上传文件并查看进度条？ [英] how to upload files and see a progress bar?

问题描述

您好，我正在使用blazor和aspnet core有一个问题，我已经有一个uploads files组件，在上载它时会显示一个包含我上载的文件数据的表，但我希望在上载文件时，它只会在文件加载时显示名称和progress bar，但我不知道如何执行此操作。

这是我上传文件的代码：

<h3 class="text-center">Subir Archivo</h3>

<div class="input-group col-md-4">
    <div class="input-group-prepend">
        <span class="input-group-text"></span>
    </div>
    <div class="custom-file">
        <InputFile class="custom-file-input" id="inputGroupFile01" lang="es" multiple OnChange="HandleSelection" />
        <label class="custom-file-label" for="inputGroupFile01">Seleccionar Archivo...</label>
    </div>
</div>
<br />
@if (selectedFiles != null)
{
    <table class="table table-hover text-center">
        <thead>
            <tr>
                <th>Nombre</th>
                <th>Tamaño en bytes</th>
                <th>Fecha de Modificación</th>
                <th>Tipo de Archivo</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var file in selectedFiles)
            {
                <tr>
                    <td>@file.Name</td>
                    <td>@file.Size</td>
                    <td>@file.LastModified</td>
                    <td>@file.Type</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    IFileListEntry[] selectedFiles;

    async Task HandleSelection(IFileListEntry[] files)
    {
        selectedFiles = files;
        foreach (var selectedFiles in files)
        {
            if (files != null)
            {
                var ms = new MemoryStream();
                await selectedFiles.Data.CopyToAsync(ms);
                var content = new MultipartFormDataContent {
                { new ByteArrayContent(ms.GetBuffer()), ""Upload"", selectedFiles.Name } };
                await Http.PostAsync("Upload", content);                             
            }
        }
    }
}

看起来是这样的：

我想要这样的东西，但我不知道这样做有多容易

推荐答案

Web中没有现成的代码来满足您的要求。Syncfusion请确保组件与您的外观相匹配，但很遗憾，您需要许可证才能使用该组件。

Umair提到的内容是迄今为止在没有许可证的情况下在Blazor中上载文件的最佳方案。

(100.0 * file.Data.Position / file.Size).ToString("0")将为您提供文件读取百分比。接下来，您可以使用bootstrap或任何其他进度条来跟踪您的进度。

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

在上面示例中，您只需更改style和aria-valuenow值。在Blazor中，您的代码将如下所示。

@{
    var progress = (100.0 * file.Data.Position / file.Size).ToString("0");
    <div class="progress">
        <div class="progress-bar" role="progressbar" style="@($"width: {progress}%")" aria-valuenow="@progress" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
}

稍后，您可以使用CSS为您提供所需的确切外观。

这篇关于如何上传文件并查看进度条？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！