在 Razor 视图中为 IFormFile 更改 <input> 中的“选择文件”和“未选择文件”文本

Question

我有一个 ASP.NET Core 5 Web 应用程序，其中包含上传文件的操作。

这是模型：

public class UploadViewModel
{
    public IFormFile FileToUpload { get; set; }
}

这是视图部分

<div class="form-group">
    <label class="control-label">@Localizer["FileToUpload"]</label>
    <input asp-for="FileToUpload" class="form-control" />
    <span asp-validation-for="FileToUpload" class="text-danger"></span>
</div>

在网络浏览器中，我可以在文本框中看到“选择文件”按钮，其中包含“未选择文件”文本：

此应用程序已本地化，因此我需要根据所选语言更改这些文本，可以吗？

Answer 1

也许仅使用 c# 是不可能的。但你可以只使用 Css 和 Javascript 来做到这一点。

<div class="form-group">
    
    <input type='file' id="aa" onchange="pressed()" asp-for="FileToUpload" class="form-control" />
    <label id="fileLabel" class="control-label">@Localizer["FileToUpload"]</label>
   ...
</div>

Javascript

window.pressed = function(){
    var a = document.getElementById('aa');
    if(a.value == "")
    {
        fileLabel.innerHTML = "Choose file";
    }
    else
    {
        var theSplit = a.value.split('\\');
        fileLabel.innerHTML = theSplit[theSplit.length-1];
    }
};

CSS

input[type=file]{
    width:90px;
    color:transparent;
}

输出

或者你可以使用纯CSS来做到这一点，如下所示：-

<input type='file' id="foo" asp-for="FileToUpload" class="form-control" />

CSS

input[type=file]{
 color:transparent;
}
input[type=file]:after {
    color: #000;
    content:"This Works Man!!";
}

输出：-

Answer 2

我想在 YMCA 获得一个职位空缺，因为我提供的上述信息是真实的，所以请您考虑一下这个请求