如何修改ASP.NET Core 5 Razor视图中IFormFile绑定input的默认提示文本

实现方案 #

这个需求完全可实现。浏览器默认的文件上传控件文本由浏览器自身控制，无法直接通过input属性修改，我们可以通过「隐藏原生控件+自定义可本地化的可见元素」的方案实现需求，具体操作如下：

1. 修改视图代码 #

替换原有文件上传部分的代码，隐藏原生input，绑定自定义的按钮和显示文本，直接复用你现有的@Localizer服务做本地化：

<div class="form-group">
    <label class="control-label">@Localizer["FileToUpload"]</label>
    <!-- 自定义上传区域 -->
    <div class="custom-file-upload">
        <label for="FileToUpload" class="custom-upload-btn">@Localizer["ChooseFile"]</label>
        <span id="fileChosenText">@Localizer["NoFileChosen"]</span>
        <!-- 原生input设为隐藏，如果项目没有引入Bootstrap，把d-none替换为自定义display:none样式即可 -->
        <input asp-for="FileToUpload" class="form-control d-none" id="FileToUpload" />
    </div>
    <span asp-validation-for="FileToUpload" class="text-danger"></span>
</div>

记得在你的本地化资源文件中添加ChooseFile、NoFileChosen两个key对应的多语言文本。

2. 添加配套样式 #

调整样式让自定义控件的展示效果和原有控件保持一致：

.custom-file-upload {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    width: fit-content;
    min-width: 300px;
}
.custom-upload-btn {
    background-color: #e9ecef;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    margin: 0;
}
#fileChosenText {
    color: #6c757d;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

3. 可选：实现选中文件后动态更新文件名 #

添加一段简单的JS，选中文件后替换默认文本为实际文件名：

document.getElementById('FileToUpload').addEventListener('change', function(e) {
    const fileName = e.target.files[0]?.name || '@Localizer["NoFileChosen"]';
    document.getElementById('fileChosenText').textContent = fileName;
});

原有模型绑定、表单验证的逻辑无需修改，和之前的运行逻辑完全一致。

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