Javascript 无论如何要从类型=文件输入中删除“未选择文件”？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6105116/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
anyway to remove "no file selected" from type=file inputs?
提问by Peter
I can't seem to figure out anyway to remove the "No file selected" text that shows up next to my inputs with the type="file".
无论如何，我似乎无法弄清楚删除显示在我的输入旁边的 type="file" 的“未选择文件”文本。
Do you guys know any way?
大家知道有什么办法吗？
采纳答案by Thom Smith
There is no cross-browser way to do this. The "no file selected" text is in the implementation-defined part of the widget, and I don't believe that most browsers offer much in the way of browser-specific customization. On the other hand, you could simply use CSS to cover the text with something when the value attribute is empty.
没有跨浏览器的方法可以做到这一点。“未选择文件”文本位于小部件的实现定义部分，我认为大多数浏览器在特定于浏览器的自定义方面提供的功能不多。另一方面，当 value 属性为空时，您可以简单地使用 CSS 来覆盖文本。
回答by Ajey
input[type='file'] {
color: transparent;
}
Enjoy
享受
回答by LuAmbros
You can do this by defining a width to the input and hiding the exceeding content (the undesired "No file selected" text).
您可以通过为输入定义宽度并隐藏超出的内容（不需要的“未选择文件”文本）来实现此目的。
input {
width: 132px;
overflow:hidden;
}
Here is the demonstration on jsfiddle.
Beware: each language has its own default text and it may render different input sizes. In brazilian portuguesethat 132px width is fine!
注意：每种语言都有自己的默认文本，并且可能呈现不同的输入大小。在巴西葡萄牙语中，132px 宽度就可以了！
My answer was based on this similar question on stackoverflow.
我的回答是基于stackoverflow上的这个类似问题。
回答by BrightIntelDusk
You can replace the file field with a button with the answer to this question: file upload button without input field?
您可以用按钮替换文件字段并回答以下问题：没有输入字段的文件上传按钮？
回答by Carlos Pliego
This is a really good hack and its a lot cleaner.
这是一个非常好的 hack 并且它更干净。
HTML
HTML
<div id="file_info' style='display:inline;'>Browse</div>
<input type="file" name='file[]' multiple style='opacity: 0;' onchange='displayFileName()'/>
JS
JS
function displayFileName() {
var files = $('input[type="file"]')[0].files;
document.getElementById('file_info').innerHTML = files.length + " images to upload";`
}
回答by Luan Dang
CSS
<style>
#image_file{
position: relative;
width: 188px;
border: 1px solid #BBB;
margin: 1px;
cursor: pointer;
float: left;
}
</style>
HTML
<input id="image_file" onclick="getFile()" onfocus="this.blur()" value=""/>
<div style='height: 0px;width: 0px; overflow:hidden;'>
<input type="file" id="PinSpot_file">
</div>
<input type="button" onclick="getFile()" style="background-color: #DDD;" value="Browser" >
JAVASCRIPT
function getFile(){
document.getElementById("PinSpot_file").click();
}
// Event when change fields
$('#PinSpot_file').live('change', function(e) {
var file = this.value;
var fileName = file.split("\");
document.getElementById("image_file").value = fileName[fileName.length-1];
//AJAX
}
