如何在文件上传完成后替换文件输入框的“未选择文件”提示文本

后端处理（ControllerX.cs） #

在上传方法中，将成功上传的文件名存入TempData（如果上传后是重定向页面，TempData能跨请求保存数据；如果直接返回视图，用ViewData也可以）：

[HttpPost]
public IActionResult UploadFile(IFormFile file)
{
    if (file != null && file.Length > 0)
    {
        // 执行文件保存逻辑（示例：保存到wwwroot/uploads目录）
        var savePath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "uploads", file.FileName);
        using (var stream = new FileStream(savePath, FileMode.Create))
        {
            file.CopyTo(stream);
        }
        
        // 存储成功上传的文件名
        TempData["UploadedFileName"] = file.FileName;
    }
    else
    {
        // 可选：添加上传失败提示
        TempData["UploadError"] = "请选择有效文件后再上传";
    }

    // 返回原页面（根据实际需求选择RedirectToAction或直接返回View）
    return RedirectToAction(nameof(Index));
}

前端页面修改 #

在表单页面中，根据后端传递的TempData值显示对应的提示，替代默认的“未选择文件”状态：

方式1：替换输入框显示提示（保留重新上传入口）

<form enctype="multipart/form-data" asp-action="UploadFile" asp-controller="ControllerX" method="post">
    <dl>      
        <dd>
            @if (!string.IsNullOrEmpty(TempData["UploadedFileName"]?.ToString()))
            {
                <!-- 显示成功提示 -->
                <span class="text-success">文件@TempData["UploadedFileName"]已成功上传</span>
                <!-- 保留文件输入框，支持重新上传 -->
                <input name="file" type="file" class="mt-3">
            }
            else
            {
                <!-- 初始状态显示文件输入框 -->
                <input name="file" type="file">
                <!-- 显示上传错误提示（可选） -->
                @if (!string.IsNullOrEmpty(TempData["UploadError"]?.ToString()))
                {
                    <span class="text-danger ms-2">@TempData["UploadError"]</span>
                }
            }
        </dd>
    </dl>
    <input class="btn btn-primary" type="submit" value="Upload" />
</form>

方式2：在输入框旁添加提示（不替换输入框）

如果希望保留原输入框的显示，仅在旁边添加成功提示：

<form enctype="multipart/form-data" asp-action="UploadFile" asp-controller="ControllerX" method="post">
    <dl>      
        <dd>
            <input name="file" type="file">
            <!-- 显示成功提示 -->
            @if (!string.IsNullOrEmpty(TempData["UploadedFileName"]?.ToString()))
            {
                <span class="text-success ms-2">文件@TempData["UploadedFileName"]已成功上传</span>
            }
            <!-- 显示错误提示（可选） -->
            @if (!string.IsNullOrEmpty(TempData["UploadError"]?.ToString()))
            {
                <span class="text-danger ms-2">@TempData["UploadError"]</span>
            }
        </dd>
    </dl>
    <input class="btn btn-primary" type="submit" value="Upload" />
</form>

注意事项 #

• TempData的数据仅在后续一次请求中有效，用户刷新页面后提示会消失，符合上传成功提示的常规需求。
• 需确保文件保存逻辑的异常处理（比如权限不足、磁盘空间不足等），可以通过TempData添加对应的错误提示信息。

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