本文详解如何在 blazor（server 或 webassembly）中不依赖 javascript，纯 c# 实现拖拽区域 + 文件选择、过滤指定类型（.pdf/.png/.jpg）、实时显示文件名并输出到浏览器控制台。

本文详解如何在 blazor（server 或 webassembly）中不依赖 javascript，纯 c# 实现拖拽区域 + 文件选择、过滤指定类型（.pdf/.png/.jpg）、实时显示文件名并输出到浏览器控制台。

Blazor 提供了原生、安全且跨平台的文件上传能力（自 .NET 6 起正式支持），无需引入外部 JS 脚本即可完整实现拖拽（drag & drop）、文件类型校验、文件名提取与控制台日志输出。核心在于使用 组件配合 @onchange 和 @ondrop 事件，并通过 IBrowserFile 接口获取元数据。

✅ 正确做法：纯 Blazor 实现（推荐）

将你原有的 HTML 结构替换为 Blazor 原生组件，如下所示：

<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="Icon for upload file" 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="HandleFileSelected"></inputfile><p id="fileName">@fileName</p>
</div>

@code {
    private string fileName = "";

    private void HandleFileSelected(InputFileChangeEventArgs e)
    {
        var file = e.File;
        fileName = file.Name;
        Console.WriteLine($"Selected file: {file.Name} ({file.Size} bytes)");
        StateHasChanged();
    }

    private void HandleDrop(DragEventArgs e)
    {
        if (e.DataTransfer.Files.Length > 0)
        {
            var file = e.DataTransfer.Files[0];
            // 注意：Blazor 中 DragEventArgs.DataTransfer.Files 是 IBrowserFile[]（.NET 7+）
            // 若使用 .NET 6，需升级或改用 InputFile 的 onchange（见下方兼容说明）
            fileName = file.Name;
            Console.WriteLine($"Dropped file: {file.Name} ({file.Size} bytes)");
            StateHasChanged();
        }
    }
}

⚠️ 重要版本说明：

• .NET 7+：DragEventArgs.DataTransfer.Files 直接返回 IBrowserFile[]，可直接使用；
• .NET 6：DataTransfer.Files 不可用，必须依赖 的 @onchange 触发（用户点击选择），拖拽需通过 CSS 区域引导用户释放到 上（它会自动捕获 drop 事件）。此时可省略 @ondrop，仅保留 HandleFileSelected 即可覆盖所有场景。

✅ 更健壮的处理（推荐生产使用）

添加类型校验与多文件支持（即使只取第一个）：

private async Task HandleFileSelected(InputFileChangeEventArgs e)
{
    var file = e.File;

    // 类型白名单校验（基于扩展名）
    var validExtensions = new[] { ".pdf", ".png", ".jpg", ".jpeg" };
    var extension = Path.GetExtension(file.Name).ToLowerInvariant();
    if (!validExtensions.Contains(extension))
    {
        fileName = "❌ Unsupported file type";
        Console.WriteLine($"Rejected: {file.Name} — invalid extension '{extension}'");
        StateHasChanged();
        return;
    }

    fileName = file.Name;
    Console.WriteLine($"✅ Accepted: {file.Name} | Type: {file.ContentType} | Size: {file.Size:N0} bytes");
    StateHasChanged();
}

? 样式增强建议（可选）

为提升拖拽体验，可动态添加高亮类（如 border-2 border-blue-500）：

@code