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

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

【问题讨论】:

标签: html input


【解决方案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 行中使用&lt;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"', 被浏览器忽略?"): stackoverflow.com/questions/1342039
【解决方案5】:

适用于所有浏览器希望它也适用于您。

HTML:
&lt;input type="file" class="custom-file-input"&gt;

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>
      

      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/

      【讨论】:

        【解决方案10】:

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

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

        我的原始答案(我以为 OP 是在询问路径,而不是按钮文本):

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

        【讨论】:

          【解决方案11】:

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

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

            我知道,没有人要求它,但如果有人使用引导程序,它可以通过 LabelCSS 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】:
                1. &lt;input type="file"&gt;之前添加一张图片,&lt;input style="position:absolute"&gt;会占用&lt;input type="file"&gt;的空间
                2. 对文件元素使用以下 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 你在做什么?如果您认为某个答案不正确或没有帮助,请投反对票,但绝不可诋毁它!
                                猜你喜欢
                                • 2010-10-09
                                • 2011-09-13
                                • 1970-01-01
                                • 1970-01-01
                                • 2012-07-05
                                • 2013-12-31
                                • 1970-01-01
                                相关资源
                                最近更新 更多