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

Posted 2023-02-22

技术标签:

【中文标题】如何更改<input type="file" />的按钮文字？【英文标题】：How to change the button text of <input type="file" />? 【发布时间】：2010-12-28 23:49:30 【问题描述】：

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

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

【问题讨论】：

你说的是文件名还是按钮文本？ How to rename html "browse" button? 的可能重复项相关：***.com/q/210643 现在有::file-selector-button这样的伪元素。也许这些可以以某种方式使用。 【参考方案1】：

使用Bootstrap 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.">

【讨论】：

似乎对我不起作用。它仍然显示浏览器的默认按钮。此外，github.com/markusslima/bootstrap-filestyle.git 的演示也不起作用 - 所有示例都显示默认按钮。我错过了什么吗？ @Tony Uhh.... 是什么让您认为 Bootstrap 也没有在下面使用“古怪的 hack”？ :-) 在这样一个小问题上扔一个 javascript 库（带有插件！）是一个不雅的矫枉过正。投反对票。它甚至不是一个答案，只是一个需要额外库的解决方法。答案应该是为了改变浏览器的呈现行为。将 data-buttonText 更改为 data-text :) 现在工作。【参考方案2】：

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

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，表单会被标记为'dangerous'，无法使用javascript提交，不确定是否可以传统方式提交。

【讨论】：

这是一个聪明的解决方案。难道你不能也用 @Code Commander -谢谢，是的，你可以用你想要的每一个元素来做，但最常见的是元素。只需去掉“文件输入”的按钮+文本字段... 提醒任何使用上述内容的人，一些移动浏览器禁用以编程方式触发文件输入点击。具体来说，适用于 Galaxy S III 的 android 4 我在 asp.net gridview 行中使用<input type="file" ，其行可以动态添加..所以调用相关的输入点击触发器（相同的）将是一个真正的痛苦行）同时单击图像！ :// 您的解决方案不起作用。您没有设置边框、边距、填充和背景颜色，否则会很明显【参考方案3】：

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

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

【讨论】：

在 ie7 模式下抛出 HTA 文件，最后我不得不删除 ;。太好了，不想仅仅为了改变两个文本单词而包含引导程序，但是如果文件输入是动态创建的，你会怎么做呢？ @asparism 使用 JavaScript 来操作 DOM，通过设置样式隐藏它并使用 before() 并添加新的输入元素？ @MushyPeas 这是最简单的方法。试图玩css，但这个解决方案更快更容易。谢谢这对我来说也是最简单的方法！它还允许我将“模拟”文件按钮设置为一组其他表单按钮选项之一 - 无需担心显示奇怪的“浏览”文件按钮。【参考方案4】：

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

【讨论】：

你能证明不能改吗？或者通过浏览浏览器的源代码，至少对于开源的。这可以通过答案（对于另一个问题，例如“为什么值的内容，'VALUE="C:\someFile.txt"'对于类型文件的输入字段，'TYPE ="FILE"', 被浏览器忽略？"): ***.com/questions/1342039【参考方案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: '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">

【讨论】：

在 Safari 上工作，不过它在我的 FF 41.0.2 上完美运行。您正在运行跨浏览器兼容性问题，请参阅 CSS BOX 模型以缩小问题。问题可能是FF是基于Gecko构建的，而不是webkit。（我最好的猜测）选择一些文件好的，谢谢！查看this JSFiddle。如果你用它来编辑你的答案，我认为它值得一票:)【参考方案6】：

简单

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

[使用 sn-p 编辑]

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

【讨论】：

【参考方案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">

【讨论】：

【参考方案8】：

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

示例 HTML：

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

示例 JS：

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

结果：

【讨论】：

对于“多个”文件来说不是一个很好的解决方案。不显示多个文件。【参考方案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>

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/

【讨论】：

【参考方案10】：

编辑：我现在看到您询问的是按钮文本，而不是文件路径。我的错。我将在下面留下我原来的答案，以防偶然发现这个问题的其他人按照我最初的方式解释它。

第二次编辑：我删除了这个答案，因为我认为我误解了这个问题并且我的答案不相关。但是，另一个答案中的 cmets 表明人们仍然希望看到这个答案，所以我取消了它。

我的原始答案（我认为 OP 是在询问路径，而不是按钮文本）：

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

【讨论】：

【参考方案11】：

使用`<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;

【讨论】：

【参考方案12】：

我知道，没有人要求它，但如果有人使用引导程序，它可以通过 Label 和 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>

这是fiddle。

【讨论】：

【参考方案13】：

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

【讨论】：

【参考方案14】：

<input type="file">

<input style="position:absolute">

<input type="file">

对文件元素使用以下 CSS

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

【讨论】：

【参考方案15】：

您可以简单地添加一些 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;

&lt;input type="file" class="btn-file-upload" value="Uploadfile" /&gt;

【讨论】：

【参考方案16】：

这是一种使用纯 HTML 和 javascript “更改”具有文件类型的输入文本的方法：

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

【讨论】：

【参考方案17】：

对我来说，它不适用于 bootstrap-filestyle 的自定义文本。它有助于按钮装饰，但它的文字很奇怪要改变，在开始与 css 搏斗之前，我尝试以下方法：

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

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

干杯

【讨论】：

【参考方案18】：

除了MushyPeas answer，您还可以像这样添加一个标签来显示文件名（不需要jQuery）：也感谢answer。

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

【讨论】：

【参考方案19】：

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

【讨论】：

【参考方案20】：

如果您使用 rails 并且在应用时遇到问题，我想从@Fernando Kosh 发布的原始答案中添加一些提示

下载文件zip并复制文件bootstrap-filestyle.min.js ke文件夹app/assets/javascripts/

打开你的 application.js 并在下面添加这一行

//= 需要 bootstrap-filestyle.min

打开你的咖啡并添加这一行

$(":file").filestyle(buttonName: "btn-primary",buttonBefore: true,buttonText: "你的文字在这里",icon: false);

【讨论】：

【参考方案21】：

我为我的项目这样做：

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

【讨论】：

【参考方案22】：

这是一个可能对您有所帮助的替代解决方案。这隐藏了出现在按钮之外的文本，将其与 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>

【讨论】：

在 Chrome 39 中，我看到了上传图像文本和按钮。自从您发布此内容以来，Chrome 对文件输入的处理可能发生了变化？ @yan-bellavance 你在做什么？如果您认为某个答案不正确或没有帮助，请投反对票，但绝不可诋毁它！

以上是关于如何更改<input type="file" />的按钮文字？的主要内容，如果未能解决你的问题，请参考以下文章

使用 JQuery 检测对 <input type="text"> 的所有更改（立即）

如何更改 iOS 和安卓浏览器上的 input[type="radio"] 元素的默认样式？

从 android 设备查看时更改网站中 <input type="file" accept="image/*"> 的上传选项

如何调用 JS 函数，从 AUTOCOMPLETE 列表中选择 <input type="text"> 中的数据？

如何通过 API “input type='file'” 标签使用本地文件更改视频源...没有 Jquery 或外部库

时间h5的date的原生样式怎么更改

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

使用&lt;label&gt; 作为标题

使用`<label>` 作为标题