Html 更改 input type="file" 中的默认文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5138719/
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
Change default text in input type="file"?
提问by Harry Joy
I want to change default text on button that is "Choose File" when we use input="file".
我想改变按钮默认文本是“ Choose File”当我们使用input="file"。
How can I do this? Also as you can see in image button is on left side of text. How can I put it on right side of text?
我怎样才能做到这一点？同样，正如您在图像按钮中看到的那样，位于文本的左侧。我怎样才能把它放在文本的右侧？
采纳答案by Shiv Kumar
Each browser has it's own rendition of the control and as such you can't change either the text or the orientation of the control.
每个浏览器都有自己的控件再现，因此您不能更改控件的文本或方向。
There are some "kind of" hacks you may want to try if you want an html/csssolution rather than a Flash or silverlightsolution.
如果您想要html/ css解决方案而不是 Flash 或silverlight解决方案，您可能想尝试一些“某种”技巧。
http://www.quirksmode.org/dom/inputfile.html
http://www.quirksmode.org/dom/inputfile.html
http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
Personally, because most users stick to their browser of choice, and therefore are probably used to seeing the control in the default rendition, they'd probably get confused if they saw something different (depending on the types of users you're dealing with).
就个人而言，因为大多数用户都坚持使用他们选择的浏览器，因此可能习惯于在默认版本中看到控件，如果他们看到不同的东西（取决于您正在处理的用户类型），他们可能会感到困惑.
回答by algometrix
Use "for"attribute of labelfor input.
使用for 的"for"属性。labelinput
<div>
<label for="files" class="btn">Select Image</label>
<input id="files" style="visibility:hidden;" type="file">
</div>
$("#files").change(function() {
filename = this.files[0].name
console.log(filename);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<label for="files" class="btn">Select Image</label>
<input id="files" style="visibility:hidden;" type="file">
</div>回答by Paulo Mogollón
This might help someone in the future, you can style the label for the input as you like and put anything you want inside it and hide the input with display none.
这可能会在将来对某人有所帮助，您可以根据需要设置输入标签的样式，并将您想要的任何内容放入其中，并使用 display none 隐藏输入。
It works perfectly on cordova with iOS
它在带有 iOS 的cordova 上完美运行
<link href="https://cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/css/ratchet.css" rel="stylesheet"/>
<label for="imageUpload" class="btn btn-primary btn-block btn-outlined">Seleccionar imagenes</label>
<input type="file" id="imageUpload" accept="image/*" style="display: none">回答by 1Cr18Ni9
I think this is what you want:
我认为这就是你想要的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<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">
</body>
</html>回答by Anuraj
It is not possible. Otherwise you may need to use Silverlight or Flash upload control.
这不可能。否则您可能需要使用 Silverlight 或 Flash 上传控件。
回答by Tushar Shukla
Here how you can do it:
jQuery:
在这里你可以怎么做：
jQuery：
$(function() {
$("#labelfile").click(function() {
$("#imageupl").trigger('click');
});
})
css
css
.file {
position: absolute;
clip: rect(0px, 0px, 0px, 0px);
display: block;
}
.labelfile {
color: #333;
background-color: #fff;
display: inline-block;
margin-bottom: 0;
font-weight: 400;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-image: none;
white-space: nowrap;
padding: 6px 8px;
font-size: 14px;
line-height: 1.42857143;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
HTML code:
HTML代码：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="margin-top:4px;">
<input name="imageupl" type="file" id="imageupl" class="file" />
<label class="labelfile" id="labelfile"><i class="icon-download-alt"></i> Browse File</label>
</div>
回答by oroyo segun
<button class="styleClass" onclick="document.getElementById('getFile').click()">Your text here</button>
<input type='file' id="getFile" style="display:none">
This is still the best so far
这仍然是迄今为止最好的
回答by Thielicious
I made a script and published it at GitHub: get selectFile.jsEasy to use, feel free to clone.
我做了一个脚本发布在GitHub上：get selectFile.js好用，可以随意克隆。
HTML
HTML
<input type=file hidden id=choose name=choose>
<input type=button onClick=getFile.simulate() value=getFile>
<label id=selected>Nothing selected</label>
JS
JS
var getFile = new selectFile;
getFile.targets('choose','selected');
DEMO
演示
回答by user3784950
Update 2017:
2017 年更新：
I have done research on how this could be achieved. And the best explanation/tutorial is here: https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/
我已经对如何实现这一目标进行了研究。最好的解释/教程在这里：https: //tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/
I'll write summary here just in case it becomes unavailable. So you should have HTML:
我会在这里写摘要，以防万一它变得不可用。所以你应该有 HTML：
<input type="file" name="file" id="file" class="inputfile" />
<label for="file">Choose a file</label>
Then hide the input with CSS:
然后用 CSS 隐藏输入：
.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;}
Then style the label:
然后设置标签样式：
.inputfile + label {
font-size: 1.25em;
font-weight: 700;
color: white;
background-color: black;
display: inline-block;
}
Then optionally you can add JS to display the name of the file:
然后你可以选择添加 JS 来显示文件名：
var inputs = document.querySelectorAll( '.inputfile' );
Array.prototype.forEach.call( inputs, function( input )
{
var label = input.nextElementSibling,
labelVal = label.innerHTML;
input.addEventListener( 'change', function( e )
{
var fileName = '';
if( this.files && this.files.length > 1 )
fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
else
fileName = e.target.value.split( '\' ).pop();
if( fileName )
label.querySelector( 'span' ).innerHTML = fileName;
else
label.innerHTML = labelVal;
});
});
But really just read the tutorial and download the demo, it's really good.
但真的只是阅读教程并下载演示，它真的很好。
回答by Rana Aalamgeer
Using Bootstrap you can do this thing like below code.
使用 Bootstrap，你可以像下面的代码那样做这件事。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}
</style>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<span class="btn btn-file">Upload image from here<input type="file">
</body>
</html>
