Html 更改“未选择文件”：
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16001586/
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
Change the "No file chosen":
提问by FranXh
I have a button "Choose file" as follows (I am using Jade but it should be the same as Html5):
我有一个按钮“选择文件”如下（我使用的是 Jade 但它应该与 Html5 相同）：
input(type='file', name='videoFile')
In the browser this shows a button with a text next to it "No file chosen". I would like to change the "No file chosen" text to something else, like "No video chosen" or "Choose a video please". I followed the first suggestions here:
在浏览器中，这会显示一个按钮，旁边有一个文本“未选择文件”。我想将“未选择文件”文本更改为其他内容，例如“未选择视频”或“请选择视频”。我遵循了这里的第一个建议：
I don't want to see 'no file chosen' for a file input field
But doing this did not change the text:
但是这样做并没有改变文本：
input(type='file', name='videoFile', title = "Choose a video please")
Can anybody help me figure out where the problem is?
有人可以帮我找出问题出在哪里吗？
采纳答案by Jeremy Thille
I'm pretty sure you cannot change the default labels on buttons, they are hard-coded in browsers (each browser rendering the buttons captions its own way). Check out this button styling article
我很确定您不能更改按钮上的默认标签，它们在浏览器中是硬编码的（每个浏览器都以自己的方式呈现按钮标题）。查看此按钮样式文章
回答by SKManX
Hide the input with css, add a label and assign it to input button. label will be clickable and when clicked, it will fire up the file dialog.
使用 css 隐藏输入，添加标签并将其分配给输入按钮。标签将是可点击的，当点击时，它会启动文件对话框。
<input type="file" id="files" class="hidden"/>
<label for="files">Select file</label>
Then style the label as a button if you want.
如果需要，然后将标签样式设置为按钮。
回答by Odin
Try this its just a trick
试试这只是一个技巧
<input type="file" name="uploadfile" id="img" style="display:none;"/>
<label for="img">Click me to upload image</label>
How it works
这个怎么运作
It's very simple. the Label element uses the "for" tag to reference to a form's element by id. In this case, we used "img" as the reference key between them. Once it is done, whenever you click on the label, it automatically trigger the form's element click event which is the file element click event in our case. We then make the file element invisible by using display:none and not visibility:hidden so that it doesn't create empty space.
这很简单。Label 元素使用“for”标签通过 id 引用表单元素。在这种情况下，我们使用“img”作为它们之间的参考键。完成后，无论何时单击标签，它都会自动触发表单的元素单击事件，在我们的示例中是文件元素单击事件。然后我们使用 display:none 和 not visible:hidden 使文件元素不可见，这样它就不会创建空白空间。
Enjoy coding
享受编码
回答by Tommy Steimel
See above link. I use css to hide the default text and use a label to show what I want:
见上面的链接。我使用 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];
}
};
回答by Frederic
Right, there is no way to remove this 'no file choosen', even if you have a list of pre-upload files.
是的，即使您有预上传文件的列表，也无法删除此“未选择文件”。
Simplest solution I've found (and works on IE, FF, CR) is the following
我发现的最简单的解决方案（适用于 IE、FF、CR）如下
- Hide your input and add a 'files' button
- then call the 'files' button and ask him to bind fileupload (I'm using JQuery in this example)
- 隐藏您的输入并添加“文件”按钮
- 然后调用“文件”按钮并让他绑定文件上传（我在这个例子中使用的是 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;'>It's done, works perfectly :)
完成了，完美运行:)
Fred
弗雷德
回答by Ifeanyi Chukwu
$(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://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" name="app_cvupload" class="fullwidth input rqd">回答by simon
But if you try to remove this tooltip
但是如果您尝试删除此工具提示
<input type='file' title=""/>
This wont work. Here is my little trick to work this, try title with a space. It will work.:)
这行不通。这是我解决这个问题的小技巧，尝试使用空格的标题。它会起作用。:)
<input type='file' title=" "/>
回答by Kevin Lynch
Something like this could work
像这样的东西可以工作
input(type='file', name='videoFile', value = "Choose a video please")
回答by Naeem Moavia Siddiqui
HTML
HTML
<div class="fileUpload btn btn-primary">
<label class="upload">
<input name='Image' type="file"/>
Upload Image
</label>
</div>
CSS
CSS
input[type="file"]
{
display: none;
}
.fileUpload input.upload
{
display: inline-block;
}
Note:Btn btn-primary is a class of bootstrap button. However the button may look weired in position. Hope you can fix it by inline css.
注意：Btn btn-primary 是一类引导按钮。然而，按钮的位置可能看起来很奇怪。希望您可以通过内联 css 修复它。
回答by Raj Chavan
.vendor_logo_hide{
display: inline !important;;
color: transparent;
width: 99px;
}
.vendor_logo{
display: block !important;
color: black;
width: 100%;
}
$(document).ready(function() {
// set text to select company logo
$("#Uploadfile").after("<span class='file_placeholder'>Select Company Logo</span>");
// on change
$('#Uploadfile').change(function() {
// show file name
if ($("#Uploadfile").val().length > 0) {
$(".file_placeholder").empty();
$('#Uploadfile').removeClass('vendor_logo_hide').addClass('vendor_logo');
console.log($("#Uploadfile").val());
} else {
// show select company logo
$('#Uploadfile').removeClass('vendor_logo').addClass('vendor_logo_hide');
$("#Uploadfile").after("<span class='file_placeholder'>Select Company Logo</span>");
}
});
});.vendor_logo_hide {
display: inline !important;
;
color: transparent;
width: 99px;
}
.vendor_logo {
display: block !important;
color: black;
width: 100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<input type="file" class="vendor_logo_hide" name="v_logo" id='Uploadfile'>
<span class="fa fa-picture-o form-control-feedback"></span>
<div>
<p>Here defualt no choose file is set to select company logo. if File is selected then it will displays file name</p>
</div>