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

Question

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

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

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

Answer 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提交，不确定是否可以传统方式提交。

Answer 3

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

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

Answer 4

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

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

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>

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

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

Answer 8

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

示例 HTML：

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

示例 JS：

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

结果：

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>

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/

Answer 10

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

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

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

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

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

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

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

Answer 14

1. 在<input type="file">之前添加一张图片，<input style="position:absolute">会占用<input type="file">的空间

2. 对文件元素使用以下 CSS

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

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

<input type="file" class="btn-file-upload" value="Uploadfile" />

Answer 16

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

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

Answer 17

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

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

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

干杯

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

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

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

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

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