5

我面临一个与用于文件上传的 Blazor 输入文件组件相关的小问题。

来源 - https://github.com/SteveSandersonMS/BlazorInputFile

Component Call - 
  <div class="form-control">
       <InputFile OnChange="HandleFileSelected" />
  </div>

我可以使用此组件成功上传和删除文件。当我上传文件时，文件名显示在组件旁边，如下面的屏幕截图所示。

在此处输入图像描述

当我删除文件时，文件被成功删除，但文件名仍显示在组件旁边。

我希望在删除文件后删除文件名。我尝试了几个选项，但没有运气示例 StateHasChanged();

是否可以只刷新特定组件？如何 ？

任何人都可以帮助解决这个问题。（我不想用javascript来实现解决方案）

4

3 回答 3

1

实现此目的的一种简单方法是简单地使用一些 Bootstrap 4。

<div class="custom-file" style="overflow: hidden; white-space: nowrap;" id="customFile">
    <InputFile OnChange="OnInputFileChange" class="custom-file-input" id="exampleInputFile" aria-describedby="fileHelp" multiple></InputFile>
    <label class="custom-file-label" for="exampleInputFile">
        @InputFileMessage 
    </label>
</div>

然后在后面的代码中你会有这样的东西

IBrowserFile File;
public string InputFileMessage = "Select a file...";
public void OnInputFileChange(InputFileChangeEventArgs e)
    {
        File=e.File;
        InputFileMessage=e.File.Name;
    }

然后，每当您想将 InputFile 的标签重置为其默认值时，您只需

InputFileMessage = "Select a file...";

容易，不是吗？:)

于 2021-08-08T06:31:26.853 回答
1

我可以向您展示我为隐藏标准文件输入所做的工作，并显示自定义图像并使用自定义标签作为文件名，因此您可以隐藏它、更改文本等。

我有一个 BlazorInputFile 的包装器组件，其中包含隐藏标准输入、显示按钮或其他图像以及绑定变量以显示文件名的选项：

<FileUpload CustomSuccessMessage="Your file uploaded successfully." OnChange="OnFileUploaded"
 OnReset="OnReset" ResetButtonClassName="localbutton"
 ShowStatus="false"  PartialGuidLength="10" MaxFileSize=@UploadLimit FilterByExtension="true" 
 ShowCustomButton="true"  ButtonText="Start" CustomButtonClassName="startbutton" 
 AllowedExtensions=".jpg;.png;" ShowResetButton="false" 
 CustomExtensionMessage="Only .jpg and .png files are allowed." 
 AppendPartialGuid="true" InputFileClassName="customfileupload" 
 FileTooLargeMessage=@FileTooLargeMessage>
</FileUpload>


[Parameter] public EventCallback<string> OnReset { get; set; }

在我的 CSS 中，我隐藏了这样的输入文件，这在 Edge 上不起作用，正在处理它：

这是 CustomButtonClassName，它使用我的开始图像：

CustomButtonClassName="startbutton"

.startbutton
{
    position: fixed;
    background-color: transparent;
    border: 0px;
    outline: none;
    background-image: url('../images/StartButton.png');
    background-repeat: no-repeat;
    top: 36vh;
    left: 50%;
    width: 28%;
    height: 28%;
    background-size: 100%;
    margin-left: -14%;
    cursor: pointer;
}


.customfileupload
{  
    display: inline-block;
    cursor: pointer;
    height:48px;
    min-height: 48px;
    visibility: hidden;
    display: none;
    position: fixed;
    left: 0px;
    top: 0px;
}

input[type=file], /* FF, IE7+, chrome (except button) */
input[type=file]::-webkit-file-upload-button
{
    cursor: pointer;
    display: none;
    visibility: hidden;
}

最终结果是我的上传按钮如下所示：

在此处输入图像描述

如果它可以帮助任何人，完整的源代码和示例项目在这里：

https://github.com/DataJuggler/BlazorFileUpload

Nuget：DataJuggler.Blazor.FileUpload

于 2020-04-08T18:21:56.603 回答
0

感谢 Chris Pratt 和 Data Juggler 的回复。

我写了一个小逻辑来切换上传文件控制..它只会在需要上传文件时出现，上传成功后会消失。

简单的功能就可以了。

public void ToggleFileUpload()
{
    if (showUploadFileComponent == true)
        showUploadFileComponent = false;
    else
        showUploadFileComponent = true;
}

谢谢。如果有人面临同样的问题，希望这会有所帮助。

于 2020-04-10T17:02:45.710 回答