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

Question

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

我尝试修改value，但它没有起作用。如何自定义按钮文本？

- user198729

---

你是在说文件名还是按钮文本？ - Artelius

可能是如何重命名HTML“浏览”按钮？的重复问题。 - Ciro Santilli OurBigBook.com

请返回已翻译的文本：相关：https://dev59.com/d3VC5IYBdhLWcg3wsTbv - djvg

现在有像::file-selector-button这样的伪元素。也许可以以某种方式使用它们。 - Sebastian Simon

Answer 1

使用 Bootstrap FileStyle 来美化表单文件字段。它是一个基于jQuery的组件库Twitter Bootstrap的插件。

示例用法：

包含：

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

- Fernando Kosh

---

对我来说好像不起作用。它仍然显示浏览器的默认按钮。此外，https://github.com/markusslima/bootstrap-filestyle.git 上的演示也无法工作 - 所有示例都显示默认按钮。我错过了什么吗？ - Ya.

@Tony 呃……是什么让你认为Bootstrap没有在底层使用“古怪的<img/> hack”呢？ :-) - Andz

在如此小的问题上使用一个JavaScript库（还带有插件！）是一种不雅观的过度杀伤。 - MKaama

被投下了反对票。这甚至不是一个答案，只是一个需要额外库的解决方法。回答应该旨在改变浏览器的呈现行为。 - wdetac

将 data-buttonText 改为 data-text :) 现在可以工作了。 - Fatih Erol

Answer 2

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

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

- MushyPeas

---

在HTA文件中使用ie7模式时，我不得不删除末尾的;。 - ATek

由于我无法访问动态添加事件监听器到新按钮时的uploadImgFile.change处理程序，实际上我最终使用带有设置为文件输入ID的for属性的标签元素。 - asparism

@MushyPeas，这是最简单的方法。尝试使用CSS玩耍，但这种解决方案更快更容易。谢谢。 - Mara

这对我来说也是最简单的方法！它还允许我将“模拟”文件按钮样式设置为其他表单按钮选项之一 - 而无需担心显示奇怪的“浏览”文件按钮。 - Harry Mantheakis

太棒了，运行得非常顺畅。在 Angular 项目中尝试过。 - Deen John

Answer 3

你可以使用图片来代替，通过以下方式实现：

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

注意：在IE9和IE10中，如果您通过JavaScript触发文件输入的onClick事件，则表单将被标记为“危险”，并且无法使用JavaScript提交，不确定是否可以传统提交。

- ParPar

---

这是一个聪明的解决方案。你能否使用<button>元素来实现相同的效果？ - Code Commander

@代码指挥官 -谢谢，是的，您可以对任何要素进行操作，但最常见的是<image>元素。只需摆脱“文件输入”的按钮+文本字段即可... - ParPar

提醒一下使用以上代码的人，一些移动浏览器会禁用程序触发文件输入点击事件。具体来说，三星Galaxy S III上的Android 4会出现这种情况。 - newshorts

我正在使用 <input type="file" 在 asp.net gridview 行内，这些行可以动态添加.. 因此，在点击图像时调用相应的输入点击触发器（同一行）将是一个真正的头痛！ :/ - sohaiby

你的解决方案不起作用。你可能没有设置边框、外边距、内边距和背景颜色，否则就会很明显。 - yan bellavance

同样地，在IE7中，表单不会以这种方式被提交。 - Oana-Elena Danescu

Answer 4

“上传文件…”文本是由浏览器预定义的，无法更改。 唯一的解决方法是使用基于Flash或Java的上传组件，例如swfupload。

- Pekka

---

你能证明它是无法改变的吗？ - user198729

或者通过浏览器的源代码，至少对于开源浏览器来说。 - Pekka

这可能是答案（对于另一个问题，例如“为什么浏览器忽略类型为文件（'TYPE ='FILE''）的输入字段的值为'VALUE ='C：\ someFile.txt''的内容？”）：http://stackoverflow.com/questions/1342039 - Peter Mortensen

喜欢这个答案的老派风格:D - Jamie Hutber

Answer 5

在所有浏览器上完美运作，希望它对你也有效。

HTML：
<input type="file" class="custom-file-input">

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: '选择一些文件'; 替换为你想在 '' 内显示的文本。

如果在 Firefox 中无法正常工作，请改用以下方法替代 input:

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

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

- Code Black

---

这个 jsfiddle 在 Firefox 42.0 上对我来说无法工作。在 Safari 上可以工作。你能确认它在 FF 41.0.2 上可以工作吗？ - Cullub

问题可能是因为FF是基于Gecko而不是webkit构建的。（我最好的猜测） - Cullub

<label id="addButton" for="Upload" style="background-color: #000; color:#fff; padding:4px; border-radius:4px; font-family:monospace;" >选择文件</label><input id="Upload" type="file" multiple="multiple" name="_photos" accept="image/*" style="visibility: hidden"> - Code Black

这个能不能用<button>代替<label>？ - Cullub

好的，谢谢！请查看这个JSFiddle（http://jsfiddle.net/61zLtzx6/2/）。如果您将其编辑到您的答案中，我认为它值得点赞 :) - Cullub

Answer 6

简单地

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

- Ken Karlo

---

我喜欢你的解决方案，但是，在选择图片后，我该如何更改标签文本？ - Ragnar

Answer 7

我认为这正是您所需要的：

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

- Chit

---

这个完成了任务。谢谢。 - Marcel Kraan

Answer 8

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

示例HTML：

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

JS示例：

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

结果：

- datchung

---

不是针对“多个”文件的好解决方案。无法显示多个文件。 - Benj Sanders

Answer 9

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

JavaScript

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/

- websky

Answer 10

我知道，虽然没有人要求，但如果有人在使用Bootstrap，可以通过标签和CSS伪选择器来更改它。

要更改按钮文本：

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

更改字段文本：

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

这里是一个fiddle示例。

- actuallyakash

---

这个，结合w3schools的技巧，对我来说非常有效。而且由于我已经在使用Bootstrap，所以不需要安装任何其他插件。 - Bazil