更改“无选择文件”:

小开

最佳答案

我很确定你不能改变按钮上的默认标签，它们在浏览器中是硬编码的(每个浏览器都以自己的方式呈现按钮标题)。看看这个纽扣造型制品纽扣造型制品

小开

这样也行

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

小开

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

小开

使用 css 隐藏输入，添加一个标签并将其分配给输入按钮。标签将被点击，当点击，它将启动文件对话框。

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

如果需要，可以将标签设置为按钮样式。

小开

对，没有办法删除这个“没有文件选择”，即使你有一个预上传文件的列表。

我找到的最简单的解决方案(可以在 IE，FF，CR 上使用)如下

隐藏您的输入，并添加一个“文件”按钮
然后调用‘ 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;'>

完成了，非常完美

弗雷德

小开

$(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=" "/>

小开

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

小开

试试这个，只是个小把戏

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

它是如何工作的

很简单。Label 元素使用“ for”标记通过 id 引用表单的元素。在本例中，我们使用“ img”作为它们之间的引用键。一旦完成，无论何时单击标签，它都会自动触发表单的元素 click 事件，在我们的示例中就是 file 元素 click 事件。然后，我们使用 display: none 而不是 visible: hide 使 file 元素不可见，这样它就不会创建空白空间。

享受编程吧

小开

你可以这样试试:

<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获得选定的文件名

这是工作小提琴:

Http://jsfiddle.net/eamrmoc7/

小开

超文本标示语言

  <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-basic 是一类自举按钮。然而，按钮可能看起来怪异的位置。希望你可以修复它的内联 CSS。

小开

这将帮助您更改“无文件选择选择配置文件图片”的名称

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

小开

 .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>

小开

只需改变输入的宽度。大约90像素

<input type="file" style="width: 90px" />

小开

使用改变了标签文本的标签

<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>

小开

我会用“按钮”而不是“标签”，希望这对某人有所帮助。

这将只显示一个按钮，用户点击将弹出文件选择器，选择文件后，自动上传。

<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

这基本上是阿莫斯使用按钮的具体版本。

我尝试了上面的几个建议，但都没有成功(也许那就是我)。

我重新使用它来执行 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>

小开

您可以使用下面的 css 代码来隐藏(没有选择文件)

超文本标示语言

<input type="file" name="page_logo" id="page_logo">

CSS

input[type="file"]:after {color: #fff}

确保颜色和背景颜色匹配

小开

我尝试了每一个技巧，但似乎没有工作，只是导致隐藏文本与 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] {
color: transparent !important;
}
input[type=file]::before {
content: "Attach Your CV: ";
color: black;
margin-right: 10px;
}

<input type="file">

please use, after if you want to display the text after the button

小开

以下将删除“无文件选择”文本，但保留“选择文件”伪按钮完整。与这里的其他技术不同，这对可访问性的影响应该是最小的。

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)
}

小开

如果你想修改原生的 html 输入。检查这个风箱上面的 jsfiddle 链接。我已经使用了标签和输入，还有用于 ui 的 boostrap 5

.custom-file input[type="file"] {
display: none;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>


    

<div class="container mt-5">
<div class="row">
<div class="col-sm-8">
<div class="input-group custom-file">
<label class="input-group-text" for="file-name">Choose file</label>
<label class="form-control d-flex justify-content-start align-items-center" for="file-name" >
<span>Choose a video please</span>
<div class="spinner-border text-dark spinner-border-sm ms-auto" ></div>
</label>
<input type="file" class="form-control" id="file-name" onchange="pressed()"/>
</div>
</div>
</div>
</div>