我有一个“选择文件”按钮，如下所示（我使用的是 Jade，但它应该与 Html5 相同）：
input(type='file', name='videoFile')
在浏览器中，这会显示一个按钮，旁边有一个文本“未选择文件”。我想将“未选择文件”文本更改为其他内容，例如“未选择视频”或“请选择视频”。我在这里遵循了第一个建议：
但是这样做并没有改变文本：
input(type='file', name='videoFile', title = "Choose a video please")
谁能帮我找出问题出在哪里？
用css隐藏输入，添加标签并将其分配给输入按钮。标签将是可点击的，当点击时，它将启动文件对话框。
<input type="file" id="files" class="hidden"/>
<label for="files">Select file</label>
如果需要，然后将标签设置为按钮。
试试这只是一个技巧
<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 和 not visibility: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=" "/>
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 修复它。
使用更改了标签文本的标签
<input type="file" id="files" name="files" class="hidden"/>
<label for="files" id="lable_file">Select file</label>
添加jQuery
<script>
$("#files").change(function(){
$("#lable_file").html($(this).val().split("\\").splice(-1,1)[0] || "Select file");
});
</script>
.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>像这样的东西可以工作
input(type='file', name='videoFile', value = "Choose a video please")
你可以这样尝试：
<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] {
color: transparent !important;
}
input[type=file]::before {
content: "Attach Your CV: ";
color: black;
margin-right: 10px;
}<input type="file">如果要在按钮后显示文本，请使用 after
<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;
}
只需更改输入的宽度。大约 90 像素
<input type="file" style="width: 90px" />
这将帮助您更改“没有文件选择选择个人资料图片”的名称
<input type='file'id="files" class="hidden"/>
<label for="files">Select profile picture</label>
我尝试了所有技巧，但似乎没有任何效果，只是导致将带有 CSS 颜色属性的文本隐藏到#fff，因为我的背景是#fff。这是代码：
<input class="form-control upload_profile_pic"
type="file"
name="userfile" class="form-control"
style="color: #fff;">
或者
input.form-control.upload_profile_pic {
color: #fff;
}
以下将删除“未选择文件”文本，但保留“选择文件”伪按钮不变。与此处的其他技术不同，这对可访问性的影响应该很小。
input[type='file'] { font-size: 0; }
::file-selector-button { font-size: initial; }<input type="file"/>https://dev.to/sadnessojisan/hide-no-file-chosen-of-input-elements-type-file-1bn6
只需添加color: white到输入元素
input[type='file'] { color: rgba(0, 0, 0, 0) }
我会使用“按钮”而不是“标签”，希望这对某人有所帮助。
这只会显示一个按钮，用户点击会弹出文件选择器，文件选择后，自动上传。
<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;" />
您可以使用以下 css 代码隐藏（未选择文件）
HTML
<input type="file" name="page_logo" id="page_logo">
CSS
input[type="file"]:after {color: #fff}
确保颜色与背景颜色匹配
有一个很好的例子（包括文件类型验证）：
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>