问题描述

我有一个按钮”Choose file” 如下 (我正在使用玉，但它应该与 Html5 相同)：

 input(type='file', name='videoFile')

在浏览器中，它显示了一个带有文本旁边的按钮 「无文件选择」 。我想将 「没有文件选择」 文本改为其他的东西，如 「没有选择视频」 或 「请选择一个视频」 。我在这里遵循了第一个建议：

I don’t want to see ‘no file chosen’ for a file input field

但是这样做并没有改变文字：

 input(type='file', name='videoFile', title = "Choose a video please")

有谁能帮我弄清问题在哪里？

最佳解决思路

我很确定您不能更改按钮上的默认标签，它们是浏览器中的 hard-coded(每个浏览器以自己的方式呈现按钮标题) 。看看这个 button styling article

次佳解决思路

用 css 隐藏输入，添加一个标签并将其分配给输入按钮。标签可以点击，点击后会弹出文件对话框。

<input type="file" id="files" class="hidden"/>
<label for="files">Select file</label>

然后如果需要，将标签作为按钮进行样式化。

第三种解决思路

http://jsfiddle.net/ZDgRG/

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

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

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

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

第四种思路



$(function () {
     $('input[type="file"]').change(function () {
          if ($(this).val() != "") {
                 $(this).css('color', '#333');
          }else{
                 $(this).css('color', 'transparent');
          }
     });
})
input[type="file"]{
    color: transparent;
}
<script src="https://googleajax.admincdn.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" name="app_cvupload" class="fullwidth input rqd">

第五种思路

但是如果您尝试删除此工具提示

<input type='file' title=""/>

这不工作。这是我工作的小技巧，尝试用空格标题。它会工作:)

<input type='file' title=" "/>

第六种思路

对，即使你有一个 pre-upload 文件的列表，没有办法删除这个’ 没有文件选择’ 。

我发现最简单的解决方案 (在 IE，FF，CR 上工作) 如下

  1. 隐藏您的输入并添加一个’files’ 按钮

  2. 然后调用’files’ 按钮，并要求他绑定 fileupload(我在这个例子中使用 JQuery)



$('.addfiles').on('click', function() { $('#fileupload').click();return false;});
<button class="addfiles">Add Files</button>
<input id="fileupload" type="file" name="files[]" multiple style='display: none;'>

完成了，完美的工作:)

弗雷德

第七种思路

这样的事情可以工作

input(type='file', name='videoFile', value = "Choose a video please")

第八种思路

尝试这只是一个技巧

<input type="file" name="uploadfile" id="img" style="display:none;"/>
<label for="img">Click me to upload image</label>

怎么运行的

这很简单 Label 元素使用”for” 标记通过 id 引用表单的元素。在这种情况下，我们使用”img” 作为它们之间的参考键。一旦完成，每当您点击标签时，它会自动触发窗体的元素单击事件，这是我们的文件元素单击事件。然后，我们使用 display：none，而不是 visibility：hidden 来使文件元素不可见，因此它不会创建空格。

享受编码

参考文献

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。