问在Blazor中，我可以动态创建一个文件输入而不将它附加到DOM上吗？(选择文件按钮)

EN

document.querySelector("button").addEventListener("click", () => {
  const input = document.createElement("input");
  input.type = "file";
  input.onchange = () => alert("You picked: " + input.files[0]?.name);
  input.click();
});

<button>Pick File</button>

    <div class="text-center mt-5">
        <button class="btn btn-primary" @onclick="@this.AddFiles">
            @("AddFiles".Loc())
        </button>
    </div>

    async Task AddFiles()
    {
        var input = new InputFile();
        await this.Js.InvokeVoidAsync("triggerClick", input.Element);
        // triggerClick is a Javascript method that click the element
    }

    @inject IJSRuntime Js;

    <div class="text-center mt-5">
        <button class="btn btn-primary" @onclick="this.AddFiles">
            @("AddFiles".Loc())
        </button>
    </div>

    @if (this.fileRequested)
    {
        <InputFile @ref="this.txtFile" OnChange="this.OnFileChanged" class="d-none" />
    }

    bool fileRequested = false;
    InputFile? txtFile;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (this.fileRequested && this.txtFile is not null)
        {
            await this.Js.InvokeVoidAsync("triggerClick", this.txtFile.Element);
        }
    }

    async Task AddFiles()
    {
        this.fileRequested = true;
    }

    async Task OnFileChanged(InputFileChangeEventArgs e)
    {
        this.fileRequested = false;

        await this.Js.InvokeVoidAsync("alert", "You picked: " + e.File?.Name);
    }