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

是否有解决上述问题的方法？

FireFox 版本：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();
}

Answer 2

报告的问题已在 Firefox 中得到解决。查看以下与该问题相关的错误报告以供参考。

https://bugzilla.mozilla.org/show_bug.cgi?id=1610726

https://bugzilla.mozilla.org/show_bug.cgi?id=1678389

Blazor 文件输入点击在 Firefox 中不起作用

Blazor file input click not working in firefox

firefox

file-upload

input

click

blazor