Blazor如何无需依赖JS实现点击按钮触发InputFile元素的点击事件

.NET 7 及以上版本已经提供了无需自定义JS的原生实现，你可以直接捕获InputFile组件的引用，调用其内置的ClickAsync方法触发文件选择弹窗：

<!-- 页面元素 -->
<InputFile @ref="_filePickerRef" />
<button type="button" @onclick="OpenFilePicker">or Select</button>

@code {
    // 声明InputFile引用字段
    private InputFile? _filePickerRef;

    private async Task OpenFilePicker()
    {
        if (_filePickerRef != null)
        {
            await _filePickerRef.ClickAsync();
        }
    }
}

说明 #

• 该方法是Blazor框架内置的API，底层已经封装了对应的JS调用逻辑，开发者不需要自行编写和维护JS代码，符合纯Blazor的开发要求。
• 如果你使用的是.NET 6及更早版本，没有内置这个API，继续使用你现有的JS调用方案即可，也可以选择升级框架版本使用原生方案。

内容的提问来源于stack exchange，提问作者Zammil