firefox - Blazor 文件输入单击在 Firefox 中不起作用

Question

我正在创建一个 blazor 应用程序，在其中我使用隐藏文件输入和 click() 方法打开文件选择器。它在 Chrome、Edge 中运行良好。文件选择器未在 Firefox 中打开。

下面是我重现该问题的示例代码。
index.razor:

@inject IJSRuntime JSRuntime;
@*File Input is clicked using JSinterop on blazor click event of button*@
<div>
    <button @onclick="OnClick">Select File</button>
    <input type="file" id="fileElem" multiple style="display:none">
</div>


@code{
    private async Task OnClick()
    {
        //Triggers the click event of file Input
        await JSRuntime.InvokeVoidAsync("elementClick", "fileElem");
    }
}

JSInterop:

window.elementClick = (Id) => {
   // Triggers click event of the element
    document.getElementById(Id).click();
};

有没有办法解决上述问题？

火狐版本:72.0.2

更新:我也在 BUGZILLA 中报告了这个问题

Answer 1

我也有同样的问题。似乎是与 JsInterop 相关的错误。

在 aspnetcore 存储库中创建了一个问题:
https://github.com/dotnet/aspnetcore/issues/20228

解决方法 :

Razor 页面:

<input type="file" id="fileInput" style="display: none;" @onchange="YourAfterFileSelectedMethod"/> 
<button onclick="ClickFileInput()">Import</button>

功能:

function ClickFileInput() {
    document.getElementById('fileInput').click();
}