C# 如何上传文件并查看进度条？

您好，我有一个问题，我正在使用blazor和aspnet core，我已经有一个上载文件的组件，当上载时，它会显示一个包含我上载的文件数据的表，但我希望在上载文件时，它只显示文件加载时的名称和进度条，但我不知道如何做到这一点

这是我上传文件的代码：

<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);                             
            }
        }
    }
}

这就是它的样子：

我想要这样的东西，但我不知道这样做有多容易。你可以由开拓者自己使用这个：史蒂夫·桑德森，他写了一篇关于如何使用它的文章

基本上，在读取和上载文件时，您可以连接一个事件来读取文件上载进度的状态：

file.OnDataRead += (sender, eventArgs) => InvokeAsync(StateHasChanged);

这将使用以下代码给出百分比：

(100.0 * file.Data.Position / file.Size).ToString("0")

来自Steven Sanderson GitHub的完整代码

你可以由开拓者本人使用：Steve Sanderson，他已经写了一篇关于如何使用它的文章

基本上，在读取和上载文件时，您可以连接一个事件来读取文件上载进度的状态：

file.OnDataRead += (sender, eventArgs) => InvokeAsync(StateHasChanged);

这将使用以下代码给出百分比：

(100.0 * file.Data.Position / file.Size).ToString("0")

---

来自Steven Sanderson GitHub的完整代码

web上没有现成的代码可以满足您的需求。确实有与您的外观匹配的组件，但不幸的是，您需要使用该组件的许可证

上面提到的是目前为止最好的在blazor中上传文件的方式，而且没有许可证

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

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

---

稍后，您可以使用css提供您想要的确切外观和感觉。

web中没有现成的代码来满足您的需求。确实有与您的外观匹配的组件，但不幸的是，您需要使用该组件的许可证

上面提到的是目前为止最好的在blazor中上传文件的方式，而且没有许可证

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

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

---

稍后，您可以使用css来提供您想要的准确外观。

谢谢您提供的信息，事实上，我从该博客获得了能够上传文件的信息，但上传组件与我需要的有所不同。谢谢您提供的信息，事实上，我从那个博客中获得了上传文件的信息，但上传组件与我需要的有所不同。非常感谢你的时间和帮助，我已经通过进度条完成了我需要的工作，在web上有很多javascript和jquery的例子，但是c和blazor没有。非常感谢你的时间和帮助，我已经设法用进度条做了我需要的事情。在web上有很多javascript和jquery的例子，但是c和blazor没有