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

时间：2009-12-22 05:07:56

标签： html input 

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

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

21 个答案:

答案 0 :(得分：151)

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

答案 1 :(得分：99)

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

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

答案 2 :(得分：75)

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

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

答案 3 :(得分：43)

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

答案 4 :(得分：21)

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

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

答案 5 :(得分：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/

答案 6 :(得分：8)

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

示例HTML：

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

示例JS：

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

结果：

plugin result

答案 7 :(得分：4)

我认为这就是你想要的：

<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 :(得分：3)

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

第二次编辑：我删除了这个答案，因为我认为我误解了这个问题并且我的答案没有关系。然而，另一个答案的评论表明，人们仍然希望看到这个答案，所以我取消了它。

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

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

答案 9 :(得分：3)

简单地

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

答案 10 :(得分：3)

使用use Kreait\Firebase\Configuration; use Kreait\Firebase\Firebase; $clientId = '1234567890'; $email = 'account@email.com'; $key = 'private_key_goes_here'; $url = 'https://example.firebaseio.com'; $fbConfig = new Configuration(); $fbConfig->setAuthConfigFile([ 'type' => 'service_account', 'client_id' => $clientId, 'client_email' => $email, 'private_key' => $key, ]); $fb = new Firebase($url, $fbConfig); $value = $fb->get('test/hello'); # $value now stores "world" 作为标题

<label>

此作品没有任何javascript 。您可以根据自己内心的要求将标签装饰到任何复杂程度。单击标签时，单击会自动重定向到文件输入。任何方法都可以使文件输入本身不可见。如果您希望标签看起来像按钮，则有许多解决方案，例如：

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

答案 11 :(得分：1)

  1. 在<input type="file">之前添加图片，<input style="position:absolute">它将占据<input type="file">
    2. 的空间

  2. 将以下CSS用于文件元素

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

答案 12 :(得分：1)

仅CSS和引导程序类

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

答案 13 :(得分：1)

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

答案 14 :(得分：1)

我知道，没有人要求它，但是如果有人在使用引导程序，则可以通过标签和 CSS伪选择器对其进行更改。

更改按钮文字：

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

用于更改字段文本：

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

这里是fiddle。

答案 15 :(得分：0)

如果你使用rails并且有问题应用它，我想从@Fernando Kosh发布的原始答案中添加一些提示

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

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

    // = require bootstrap-filestyle.min

  • 打开咖啡并添加此行

    $（＆＃34;：file＆＃34;）。filestyle（{buttonName：＆＃34; btn-primary＆＃34;，buttonBefore：true，buttonText：＆＃34;您的文字在这里＆＃34;，icon ：false}）;

答案 16 :(得分：0)

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

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

答案 17 :(得分：0)

对我来说，它不能与 bootstrap-filestyle 一起使用自定义文本。它有助于按钮装饰，但在更改文本之前会怪异地更改文本，然后再尝试与CSS搏斗，我可以尝试以下操作：

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

bootstrap-filestyle使用名为butonText的类将组件呈现为span，因此在文档加载时只需更改文本即可。简单易用，它必须在所有浏览器上都可以使用。

欢呼

答案 18 :(得分：0)

我为我的项目这样做： 

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

答案 19 :(得分：0)

在Bootstrap +4.5中，您只需在代码中添加波纹管样式即可：

<style>
    .custom-file-input ~ .custom-file-label::after {
        content: "Your custom text ...";
    }
</style>

和您的输入：

<div class="custom-file">
    <input type="file" class="custom-file-input">
    <label class="custom-file-label">Your custom placeholder ...</label>
</div>

答案 20 :(得分：-1)

这是一种可能对您有所帮助的替代解决方案。这会隐藏按钮外显示的文本，将其与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>
相关问题
最新问题