代码之家 › 专栏 › 技术社区 › ZKS

Blazor输入文件组件(文件上传)

blazored blazor file-upload asp.net-core

0

ZKS · 技术社区 · 5 年前

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

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

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

是否可以只刷新特定组件??怎样?

有谁能帮忙解决这个问题吗。(我不想用javascript来实现这个解决方案)

0 回复 | 直到 4 年前

1

user12228709 user12228709 5 年前

<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

努杰:DataJuggler.Blazor.FileUpload文件上传

2

0

ZKS 5 年前

感谢Chris Pratt&Data Juggler为您提供的回复。。

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

简单的函数就成功了。

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