我有一个按钮“选择文件”，如下所示（我正在使用Jade，但它应该与Html5相同）：
input(type='file', name='videoFile')
在浏览器中，这将显示一个按钮，旁边带有一个文本“未选择文件”。我想将“未选择文件”文本更改为其他内容，例如“未选择视频”或“请选择视频”。我遵循了这里的第一个建议：
但是这样做并没有改变文本：
input(type='file', name='videoFile', title = "Choose a video please")
有人可以帮我弄清楚问题出在哪里吗？
Answers:
我敢肯定您不能更改按钮上的默认标签，它们在浏览器中是硬编码的（每个浏览器以自己的方式呈现按钮标题）。查看此按钮样式文章
使用CSS隐藏输入，添加标签并将其分配给输入按钮。标签将是可单击的，并且在单击时将打开文件对话框。
<input type="file" id="files" class="hidden"/>
<label for="files">Select file</label>
然后根据需要将标签样式设置为按钮。
file input它并从JavaScript中单击它。谢谢！
试试这个只是一个把戏
<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而不是visible：hidden来使文件元素不可见，从而不会产生空白空间。
享受编码
见上面的链接。我使用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];
}
};
是的，即使您有预上传文件列表，也无法删除此“未选择文件”。
我发现的最简单的解决方案（适用于IE，FF，CR）如下
$('.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;'>完成了，可以完美地工作了:)
弗雷德
$(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">但是，如果您尝试删除此工具提示
<input type='file' title=""/>
这不会工作。这是我的小技巧，请尝试使用标题加上空格。它将起作用。
<input type='file' title=" "/>
title属性，因为我看到
的HTML
<div class="fileUpload btn btn-primary">
<label class="upload">
<input name='Image' type="file"/>
Upload Image
</label>
</div>
的CSS
input[type="file"]
{
display: none;
}
.fileUpload input.upload
{
display: inline-block;
}
注意： Btn btn-primary是一类引导按钮。但是按钮的位置可能看起来很奇怪。希望您可以通过内联CSS修复它。
.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><div class="field">
<label class="field-label" for="photo">Your photo</label>
<input class="field-input" type="file" name="photo" id="photo" value="photo" />
</div>
和CSS
input[type="file"]
{
color: transparent;
background-color: #F89406;
border: 2px solid #34495e;
width: 100%;
height: 36px;
border-radius: 3px;
}
您可以这样尝试：
<div>
<label for="user_audio" class="customform-control">Browse Computer</label>
<input type='file' placeholder="Browse computer" id="user_audio"> <span id='val'></span>
<span id='button'>Select File</span>
</div>
显示所选文件：
$('#button').click(function () {
$("input[type='file']").trigger('click');
})
$("input[type='file']").change(function () {
$('#val').text(this.value.replace(/C:\\fakepath\\/i, ''))
$('.customform-control').hide();
})
感谢@ unlucky13获得选定的文件名
这是工作的小提琴：
这将帮助您更改“没有文件选择选择个人资料图片”的名称
<input type='file'id="files" class="hidden"/>
<label for="files">Select profile picture</label>
我会使用“按钮”而不是“标签”，希望对您有所帮助。
这只会显示一个按钮，用户单击后将弹出文件选择器，选择文件后自动上传。
<button onclick='<%= "$(\"#" + FileUpload1.ClientID + "\").click(); return false;" %>'>The Text You Want</button>
<asp:FileUpload onchange="$('#btnUpload').click();" ID="FileUpload1" runat="server" style="display: none;" />
<asp:Button ID="btnUpload" ClientIDMode="Static" runat="server" OnClick="btnUpload_Click" style="display: none;" />
在以下位置有一个很好的示例（包括文件类型验证）：
https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-example.html
基本上，这是Amos使用按钮的充实版本。
我尝试了上面的一些建议，但都没有成功（但也许就是我）。
我打算重新使用它进行Excel文件转换
<form>
<div>
<label for="excel_converts">Choose a spreadsheet to convert.</label>
<input type="file" id="excel_converts" name="excel_converts" accept=".xlsx, .xls, .csv" >
</div>
<div class="preview">
<p>No spreadsheet currently selected for conversion</p>
</div>
<div>
<button>Submit</button>
</div>
</form>