Html 如何更改<input type="file" /> 的按钮文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1944267/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change the button text of <input type="file" />?
提问by user198729
<input type="file" value="Browse" name="avatar" id="id_avatar" />
I tried to modify the value, but it's not working. How to customize the button text?
我试图修改value，但它不起作用。如何自定义按钮文字？
回答by Fernando Kosh
Use Bootstrap FileStyle, which is used to style the file fields of forms. It is a plugin for a jQuery-based component library called Twitter Bootstrap
使用Bootstrap FileStyle，它用于设置表单文件字段的样式。它是一个名为 Twitter Bootstrap 的基于 jQuery 的组件库的插件
Sample usage:
示例用法：
Include:
包括：
<script type="text/javascript" src="js/bootstrap-filestyle.min.js"> </script>
Via JavaScript:
通过 JavaScript：
$(":file").filestyle();
Via data attributes:
通过数据属性：
<input type="file" class="filestyle" data-classButton="btn btn-primary" data-input="false" data-classIcon="icon-plus" data-buttonText="Your label here.">
回答by ParPar
You can put an image instead, and do it like this:
你可以放一张图片，然后像这样：
HTML:
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: In IE9 and IE10 if you trigger the onClick in a file input via javascript, the form will be flagged as 'dangerous' and cannot be submitted with javascript, not sure if it can be submitted traditionally.
注意：在 IE9 和 IE10 中，如果您通过 javascript 在文件输入中触发 onClick，该表单将被标记为“危险”并且无法使用 javascript 提交，不确定是否可以传统提交。
回答by MushyPeas
Hide the file input. Create a new input to capture a click event and forward it to the hidden input:
隐藏文件输入。创建一个新输入来捕获点击事件并将其转发到隐藏输入：
<input type="button" id="loadFileXml" value="loadXml" onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file"/>
回答by Pekka
回答by Code Black
Works Perfectly on All BrowsersHope it will work for you too.
作品完美地在所有浏览器希望它会为你工作了。
HTML:<input type="file" class="custom-file-input">
HTML：<input type="file" class="custom-file-input">
CSS:
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);
}
Change content: 'Select some files';with the text you want within ''
更改content: 'Select some files';为您想要的文本''
IF NOT WORKING WITH firefox then use this instead of input:
如果不使用 firefox 则使用它而不是输入：
<label class="custom-file-input" for="Upload" >
</label>
<input id="Upload" type="file" multiple="multiple" name="_photos" accept="image/*" style="visibility: hidden">
回答by websky
<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
JS
document.getElementById("uploadBtn").onchange = function () {
document.getElementById("uploadFile").value = this.value;
};
more http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/
更多http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/
回答by datchung
回答by Ken Karlo
Simply
简单地
<label class="btn btn-primary">
<i class="fa fa-image"></i> Your text here<input type="file" style="display: none;" name="image">
</label>
[Edit with snippet]
[使用片段编辑]
<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>回答by Chit
I think this is what you want:
我认为这就是你想要的：
<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">
回答by MKaama
Use <label>for the caption
使用<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>
This works without any javascript. You can decorate the label to any degree of complexity, to your heart's content. When you click on the label, the click automatically gets redirected to the file input. The file input itself can be made invisible by any method. If you want the label to appear like a button, there are many solutions, e.g.:
这在没有任何 javascript 的情况下工作。您可以根据自己的喜好将标签装饰成任何复杂程度。当您单击标签时，单击会自动重定向到文件输入。可以通过任何方法使文件输入本身不可见。如果你想让标签看起来像一个按钮，有很多解决方案，例如：
label u {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
text-decoration: none;
color: initial;
}
