如何更改<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');
});

CAVEAT:在IE9和IE10中,如果您通过javascript触发文件输入中的onClick,表单将被标记为"危险",无法使用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

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

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

示例HTML:

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

示例JS:

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

结果:

Answer 8

用于<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 9

只是

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

[使用摘要编辑]

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

Answer 10

我知道，没有人要求它，但如果有人使用 bootstrap，它可以通过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>

这是一把小提琴。

Answer 11

除了MushyPeas 答案之外，您还可以添加一个标签来显示文件名，如下所示（不需要 jQuery）：
也归功于此答案。

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

我认为这是您想要的：

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