Blazor 中实现 PDF/PNG/JPG 文件的拖放上传与文件名显示-js教程-PHP中文网

Blazor 中实现 PDF/PNG/JPG 文件的拖放上传与文件名显示

本文详解如何在 Blazor（Server 或 WebAssembly）中纯 C# 实现拖放区域、文件选择、类型校验及控制台输出文件名，无需 JavaScript，完全基于原生 InputFile 组件与事件绑定。

本文详解如何在 blazor（server 或 webassembly）中纯 c# 实现拖放区域、文件选择、类型校验及控制台输出文件名，完全基于原生 `inputfile` 组件与事件绑定。

在 Blazor 中实现拖放（Drag & Drop）文件上传，无需 JavaScript —— 微软官方已为 InputFile 组件原生支持拖放语义。关键在于正确使用 @onchange 与 @ondrop/@ondragover 等事件，并配合 InputFile 的 Files 属性获取文件元数据。

✅ 正确做法：纯 Blazor C# 实现

以下是一个完整、可运行的 .razor 组件示例（兼容 .NET 6+，推荐 .NET 8）：

<div class="bg-white flex flex-col items-center justify-center py-20 border border-slate-200 rounded-md relative" id="fileDropArea">
    <img src="%5Cassets%5CAIDocReader%5Cicons%5Cfile-upload-input.svg" alt="Upload icon" class="w-8"><p>Drag & drop or <span class="text-tertiary">browse</span> your files</p>
    <inputfile class="absolute top-0 left-0 h-full w-full cursor-pointer opacity-0" accept=".pdf,.png,.jpg" onchange="OnFileSelected" id="fileInput"></inputfile><p id="fileName">@fileName</p>
</div>

@code {
    private string fileName = "";

    private void OnFileSelected(InputFileChangeEventArgs e)
    {
        if (e.FileCount > 0)
        {
            var file = e.GetMultipleFiles().FirstOrDefault();
            if (file != null && IsValidImageOrPdf(file))
            {
                fileName = file.Name;
                Console.WriteLine($"Selected file: {fileName}");
                StateHasChanged();
            }
        }
    }

    private void OnFileDrop(DragEventArgs e)
    {
        e.PreventDefault(); // 必须调用，否则浏览器默认行为会打开文件

        if (e.DataTransfer?.Files.Length > 0)
        {
            var file = e.DataTransfer.Files[0];
            if (IsValidImageOrPdf(file))
            {
                fileName = file.Name;
                Console.WriteLine($"Dropped file: {fileName}");
                StateHasChanged();
            }
        }
    }

    private bool IsValidImageOrPdf(IFileEntry file) =>
        file.Name.ToLowerInvariant() switch
        {
            _ when file.Name.EndsWith(".pdf", StringComparison.OrdinalIgnoreCase) => true,
            _ when file.Name.EndsWith(".png", StringComparison.OrdinalIgnoreCase) => true,
            _ when file.Name.EndsWith(".jpg", StringComparison.OrdinalIgnoreCase) => true,
            _ when file.Name.EndsWith(".jpeg", StringComparison.OrdinalIgnoreCase) => true,
            _ => false
        };
}

? 关键说明

InputFile 是核心组件：它自动处理的底层逻辑，并提供 OnChange 事件和 GetMultipleFiles() 方法访问 IFileEntry。
拖放事件必须显式阻止默认行为：@ondragover:preventDefault 和 e.PreventDefault() 是必需的，否则浏览器会尝试导航或打开文件。
IFileEntry.Name 即文件名（不含路径）：安全可靠，无需字符串切割（避免 Windows \ vs Unix / 问题）。
accept 属性仍需保留：用于原生浏览器过滤（UI 层提示），但不能替代服务端校验——前端仅作用户体验优化。
样式反馈建议：如需高亮拖入状态，可通过 @ondragenter/@ondragleave 切换 CSS 类（例如 drop-active），并在 @bind-class 中动态绑定。

⚠️ 注意事项

InputFile 在 Blazor Server 中要求启用 SignalR 流式传输（默认开启）；在 WebAssembly 中需确保 Microsoft.AspNetCore.Components.Web 包版本 ≥ 6.0。
DragEventArgs.DataTransfer.Files 在部分旧版浏览器中可能不可靠，生产环境建议以 InputFile.OnChange 为主入口，ondrop 作为增强体验补充。
控制台日志（Console.WriteLine）在 Blazor Server 中输出到服务器日志，在 WebAssembly 中输出到浏览器 DevTools Console —— 若需前端调试，可改用 JSRuntime.InvokeVoidAsync("console.log", ...)。