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

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

我试图修改value，但无法正常工作。如何自定义按钮文字？

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

您可以改为放置图像，并按以下方式进行操作：

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

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

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

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

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

作品完美地在所有浏览器希望它会为你工作了。

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

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

HTML示例：

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

JS示例：

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

结果：

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

只是

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

我认为这是您想要的：

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

编辑：我现在通过评论询问您正在询问按钮文本，而不是文件路径。我的错。如果其他人偶然发现了这个问题，我将在下面保留我的原始答案。

第二次编辑：我删除了此答案，因为我认为我误解了这个问题，而我的答案没有意义。但是，在另一个答案中的注释表明，人们仍然希望看到此答案，因此我不删除它。

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

出于安全原因，此功能不受支持。Opera网络浏览器曾经支持此功能，但已将其删除。想想如果得到支持，那将是可能的；您可以制作一个带有文件上传输入的页面，用一些敏感文件的路径预填充它，然后使用onload事件触发的javascript自动提交表单。这对于用户进行任何操作来说太快了。

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

只有CSS和bootstrap类

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

1. 在此之前<input type="file">，添加一个图像，<input style="position:absolute">它将占据<input type="file">

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

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

如果您使用滑轨并在应用时遇到问题，我想在@Fernando Kosh发表的原始答案中添加一些技巧

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

• 打开您的application.js并在下面添加此行

  // =需要bootstrap-filestyle.min

• 打开咖啡并添加这行

  $（“：file”）。filestyle（{buttonName：“ btn-primary”，buttonBefore：true，buttonText：“您的文字在这里”，图标：false}）;

您可以简单地添加一些CSS技巧。您不需要javascript或更多输入文件，并且我保留现有的value属性。您只需要添加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-filestyle使用一个名为butonText的类将组件呈现为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;">

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