如何更改 < input type = “ file”/> 的按钮文本？

<input type="file" value="Browse" name="avatar" id="id_avatar" />

我试图修改 value，但它不工作。如何自定义按钮文本？

588200 次浏览
小开

“upload file…”文本是浏览器预先定义的，不能更改。 解决这个问题的唯一方法是使用一个基于Flash或java的上传组件，如swfupload.

小开

编辑:我现在看到的评论，你是问关于按钮文本，而不是文件路径。我的坏。我将把我最初的答案留在下面，以防其他人偶然发现这个问题，以我最初的方式解释它。

第二次编辑:我删除了这个答案，因为我认为我误解了这个问题，我的答案是不相关的。然而，另一个答案中的评论表明，人们仍然想看到这个答案，所以我将其删除。

我最初的回答(我认为OP是在询问路径，而不是按钮文本):

出于安全原因，该特性不受支持。Opera网络浏览器曾经支持这一点，但它被删除了。想想如果这得到支持会发生什么;你可以创建一个带有文件上传输入的页面，用一些敏感文件的路径预先填充它，然后使用onload事件触发的javascript自动提交表单。这将发生得太快，用户无法对此采取任何措施。

小开

你可以放一张图片，像这样做:

HTML:

<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1"  name="file1" style="display:none" />

JQuery:

$("#upfile1").click(function () {
$("#file1").trigger('click');
});
< p > 警告: 在IE9和IE10中，如果你通过javascript触发文件输入中的onClick，表单将被标记为“危险”，不能用javascript提交，不确定是否可以传统方式提交
小开

这是一个可能对你有帮助的替代解决方案。这将隐藏按钮外的文本，将其与div的背景色混合。然后你可以给div一个你喜欢的标题。

<div style="padding:10px;font-weight:bolder; background-color:#446655;color: white;margin-top:10px;width:112px;overflow: hidden;">
UPLOAD IMAGE <input style="width:100px;color:#446655;display: inline;" type="file"  />
</div>
小开
  1. 在<input type="file">之前，添加一个图像和<input style="position:absolute">，它将占用<input type="file">的空间

  2. 使用以下CSS文件元素

    position:relative;
opacity:0;
z-index:99;
小开

使用引导FileStyle，它用于样式化表单的文件字段。它是一个名为Twitter Bootstrap的基于jquery的组件库的插件

示例用法:

包括:

<script type="text/javascript" src="js/bootstrap-filestyle.min.js"> </script>

通过JavaScript:

$(":file").filestyle();

通过数据属性:

<input type="file" class="filestyle" data-classButton="btn btn-primary" data-input="false" data-classIcon="icon-plus" data-buttonText="Your label here.">
小开 
<input id="uploadFile" placeholder="Choose File" disabled="disabled" />
<div class="fileUpload btn btn-primary">
<span>Your name</span>
<input id="uploadBtn" type="file" class="upload" />
</div>

JS

document.getElementById("uploadBtn").onchange = function () {
document.getElementById("uploadFile").value = this.value;
};

更多http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/

小开

这是一个JQuery插件，用于更改输入文件元素的按钮文本。

示例HTML:

<input type="file" id="choose-file" />

JS示例:

$('#choose-file').inputFileText({
text: 'Select File'
});

结果:

plugin result

小开

希望它也会为你工作。

< p > HTML: < br > <input type="file" class="custom-file-input"> < / p >

CSS:

 .custom-file-input::-webkit-file-upload-button {
visibility: hidden;
}
.custom-file-input::before {
content: 'Select some files';
display: inline-block;
background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
border: 1px solid #999;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
text-shadow: 1px 1px #fff;
font-weight: 700;
font-size: 10pt;
}
.custom-file-input:hover::before {
border-color: black;
}
.custom-file-input:active::before {
background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}

在''中使用你想要的文本更改content: 'Select some files';

如果不与firefox工作，然后使用这个而不是输入:

<label class="custom-file-input" for="Upload" >
</label>


<input id="Upload" type="file" multiple="multiple" name="_photos" accept="image/*" style="visibility: hidden">
小开

隐藏文件输入。创建一个新的输入来捕捉点击事件，并将其转发到隐藏的输入:

<input type="button" id="loadFileXml" value="loadXml" onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file"/>
小开

使用<label>作为标题

<form enctype='multipart/form-data' action='/uploads.php' method=post>
<label for=b1>
<u>Your</u> caption here
<input style='width:0px' type=file name=upfile id=b1
onchange='optionalExtraProcessing(b1.files[0])'
accept='image/png'>
</label>
</form>

这是不需要任何javascript。你可以随心所欲地把标签装饰成任何复杂程度。当您单击标签时，单击会自动重定向到文件输入。任何方法都可以使文件输入本身不可见。如果你想让标签看起来像一个按钮，有很多解决方案，例如:

label u {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;


text-decoration: none;
color: initial;
}
小开

如果你使用rails，有问题应用它，我想从@Fernando Kosh发布的原始答案中添加一些提示

  • 下载文件邮政编码，复制文件bootstrap- filstyle .min.js ke文件夹app/assets/javascripts/
  • 打开你的application.js并在下面添加这一行

    //= require bootstrap- filstyle .min

    . sh

  • 打开你的咖啡，添加这条线

    $(“文件”)。

    . filestyle({buttonName: "btn-primary"，buttonBefore: true,buttonText: "你的文本在这里"，icon: false})
小开

我认为这就是你想要的:

<button style="display:block;width:120px; height:30px;" onclick="document.getElementById('getFile').click()">Your text here</button>




<input type='file' id="getFile" style="display:none">
小开

只有CSS &引导类

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">


<div class="col-md-4 input-group">
<input class="form-control" type="text" />
<div class="input-group-btn">
<label for="files" class="btn btn-default">browse</label>
<input id="files" type="file" class="btn btn-default" style="visibility:hidden;" />
</div>
</div>

小开

简单的

<label class="btn btn-primary">
<i class="fa fa-image"></i> Your text here<input type="file" style="display: none;"  name="image">
</label>

[编辑片段]

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>


<label class="btn btn-primary">
<i class="fa fa-image"></i> Your text here<input type="file" style="display: none;" name="image">
</label>

小开

你可以简单地添加一些css技巧。你不需要javascript或更多的输入文件和我保持现有价值属性。你需要添加只有css。你可以试试这个解决方案。

.btn-file-upload{
width: 187px;
position:relative;
}


.btn-file-upload:after{
content:  attr(value);
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 48%;
background: #795548;
color: white;
border-radius: 2px;
text-align: center;
font-size: 12px;
line-height: 2;
}
<input type="file" class="btn-file-upload" value="Uploadfile" />

小开

下面是一个用纯HTML和javascript“改变”文件类型输入文本的方法:

<input id='browse' type='file' style='width:0px'>
<button id='browser' onclick='browse.click()'>
*The text you want*
</button>
小开

对我来说，它不工作自定义文本与bootstrap-filestyle。它有助于按钮装饰，但文本是奇怪的改变，在与css摔跤之前，我尝试以下:

$( document ).ready(function() {
$('.buttonText').html('Seleccione ficheros');
});

bootstrap- filstyle使用名为buttontext的类将组件渲染为span，因此当文档加载时只需更改文本。很简单，它必须在所有浏览器上工作。

干杯

小开
我在我的项目中是这样做的: 
.btn-outlined.btn-primary {
color: #000;
}
.btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active {
color:#000;
}
.btn-block {
display: block;
width: 100%;
padding: 15px 0;
margin-bottom: 10px;
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
<label for="fileUpload" class="btn btn-primary btn-block btn-outlined">Your text</label>
<input type="file" id="fileUpload"style="display: none;">

小开

我知道，没有人要求它，但如果有人使用bootstrap，它可以通过标签和CSS Pseudo-selector进行更改。

更改按钮文本:

.custom-file-label::after {
content: "What's up?";
}

更改字段文本:

<label class="custom-file-label" for="upload">Drop it like it's hot</label>

这是一个小提琴。

小开

在Bootstrap +4.5中，你可以简单地将这个添加到你的代码中:

.custom-file-input~.custom-file-label::after {
content: "Your custom text ...";
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">


<div class="custom-file">
<input type="file" class="custom-file-input">
<label class="custom-file-label">Your custom placeholder ...</label>
</div>

小开
除了MushyPeas回答之外，你还可以像这样添加一个标签显示文件名(不需要jQuery)

. this 回答.

. 

<input type="button" id="click-input" value="Write anything" onclick="document.getElementById('file').click();" />
<label for="click-input" id="file-name">Bla bla</label>
<input type="file" style="display:none;" id="file">
<script>
inputElement = document.getElementById('file')
labelElement = document.getElementById('file-name')
inputElement.onchange = function(event) {
var path = inputElement.value;
if (path) {
labelElement.innerHTML = path.split(/(\\|\/)/g).pop()
} else {
labelElement.innerHTML = 'Bla bla'
}
}
</script>

小开

不使用真实图像和“交互性”的图标怎么样?

检查下面的例子，它没有使用任何图像，甚至没有javascript，而且它是交互式的，在鼠标悬停和鼠标左键或右键点击时改变它的外观。

input
{
padding: 10px;
width: 100%;
}


input::file-selector-button
{
display: none;
}


input::before
{
border: 1px solid red;
border-radius: 3px 8px 3px 8px;
color: red;
content: attr(value)' Some more text';
margin: 25px;
padding: 5px;
}


input:hover:before
{
border: 1px groove blue;
background: lime;
}


input:active:before
{
border: 1px groove blue;
background: yellow;
}
<input type="file" value="📂 Open..." />

How it works:

Basically, it hides the main button of the standard file input element and shows its pseudo element, indicated by the :before part. Than it styles how it looks like and also some mouse events, so it is kind of "interactive".

Also using the :file-selector-button pseudo-element, allows to style the button it self or even to not display it at all as I have done int the above example with the code display: none;. This allows to use the :before element as replacement of the button.

The advantage of doing it with css is that by not using any javascript it will work even if the user's browser has javascript disabled.

About the folder icon:

Actually it is a char it self in UNICODE: 📂 that is U+1F4C2 code-point. To see it correctly the user of the page must have a font that supports it. I did not install any new font into my system (Win7) and I see it correctly: so I suppose it is correctly seen by everyone else.


提交答案