Asp:FileUpload 编辑“未选择文件”消息答案

【问题标题】：Asp:FileUpload edit "No file selected" messageAsp:FileUpload 编辑“未选择文件”消息
【发布时间】：2013-12-10 16:07:50
【问题描述】：

我只需要知道在没有选择文件时是否有办法更改Asp:FileUpload 显示的消息。

谢谢。

【问题讨论】：

stackoverflow.com/questions/17469844/… 的可能重复项

标签： c# css asp.net asp.net-webpages

【解决方案1】：

此功能适用于所有浏览器

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

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

<div>
<input type='file' title="Choose a video please" id="aa" onchange="pressed()">
<label id="fileLabel">Choose file</label>
</div>

【讨论】：

【解决方案2】：

http://jsfiddle.net/Lsgbx5ne/1/

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

对其他解决方案的改进：

适用于短文本
不改变背景颜色
纯CSS

【讨论】：

【解决方案3】：

仅将此 CSS 添加到您的代码中。它只是隐藏了“未选择文件”。

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

</style>

【讨论】：

【解决方案4】：

http://jsfiddle.net/ZDgRG/

见上面的链接。我使用 css 隐藏默认文本并使用标签显示我想要的内容：

html

<div>
      <input type='file' title="Choose a video please" id="aa" onchange="pressed()">
      <label id="fileLabel">Choose file</label>
</div>

css

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

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];
    }
 };

【讨论】：

【解决方案5】：

您使用 CSS pseduo-class :after 将文本替换为您自己的消息。你可以像这样声明一个类：

.bar:after {
    content:"Please select a file";
    background-color:white;
}

并将其分配给您的 FileUpload 控件。内容消息将替换原始消息。当然，在选择文件时，您需要删除消息，例如，您可以通过 jQuery .removeClass 执行此操作（假设您的 FileUpload 的 ID 是“foo”）：

$('#foo').change(function() {
    $(this).removeClass("bar");
})

演示：http://jsfiddle.net/5zhuL/2/

请注意，此解决方案似乎仅适用于 Webkit 浏览器（Chrome、Opera、Safari），您可能需要其他人的替代方案。

【讨论】：

【解决方案6】：

如果您在浏览器 ASP.NET 中访问页面源，请使用 type='file' 而不是 FileUpload 输入一个输入元素。当 value 属性为空时，您可以简单地使用 CSS 来覆盖文本。

【讨论】：

【解决方案7】：

不，不可能。这是 Chrome 中的标准渲染，无法更改。

【讨论】：