Html 如何自定义 <input type="file">？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5813344/
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 customize <input type="file">?
提问by Newbie Coder
Is it possible to change the appearance of <input type="file">?
是否可以更改外观<input type="file">？
回答by alex
You can't modify much about the input[type=file]control itself.
您不能对input[type=file]控件本身进行太多修改。
Since clicking a labelelement correctly paired with an input will activate/focus it, we can use a labelto trigger the OS browse dialog.
由于单击label与输入正确配对的元素将激活/聚焦它，因此我们可以使用 alabel来触发操作系统浏览对话框。
Here is how you can do it…
这是您可以如何做到的……
label {
cursor: pointer;
/* Style as you please, it will become the visible UI component. */
}
#upload-photo {
opacity: 0;
position: absolute;
z-index: -1;
}<label for="upload-photo">Browse...</label>
<input type="file" name="photo" id="upload-photo" />The CSS for the form control will make it appear invisible and not take up space in the document layout, but will still existso it can be activated via the label.
表单控件的 CSS 将使其看起来不可见并且不占用文档布局中的空间，但仍会存在，因此可以通过label.
If you want to display the user's chosen path after selection, you can listen for the changeevent with JavaScript and then read the path that the browser makes available to you (for security reasons it can lieto you about the exact path). A way to make it pretty for the end user is to simply use the base name of the path that is returned (so the user simply sees the chosen filename).
如果您想在选择后显示用户选择的路径，您可以change使用 JavaScript侦听该事件，然后读取浏览器提供给您的路径（出于安全原因，它可能会就确切路径向您撒谎）。使最终用户看起来更漂亮的一种方法是简单地使用返回路径的基本名称（因此用户只需看到所选的文件名）。
There is a great guide by Tympanusfor styling this.
回答by Konservin
Something like that maybe?
也许是这样的？
<form>
<input id="fileinput" type="file" style="display:none;"/>
</form>
<button id="falseinput">El Cucaratcha, for example</button>
<span id="selected_filename">No file selected</span>
<script>
$(document).ready( function() {
$('#falseinput').click(function(){
$("#fileinput").click();
});
});
$('#fileinput').change(function() {
$('#selected_filename').text($('#fileinput')[0].files[0].name);
});
</script>
回答by jt3k
回答by Ouadie
If you're using bootstraphere is a better solution :
如果您使用引导程序，这里是一个更好的解决方案：
<label class="btn btn-default btn-file">
Browse <input type="file" style="display: none;">
</label>
For IE8 and belowhttp://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/
对于 IE8 及以下http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/
回答by caden311
Easiest way..
最简单的方法..
<label>
Upload
<input type="file" style="visibility: hidden;"/>
</label>
回答by Christopher Reid
In webkit you can try this out...
在 webkit 中你可以试试这个...
input[type="file"]::-webkit-file-upload-button{
/* style goes here */
}
回答by Juri Karasjov
first of all it's a container:
首先它是一个容器：
<div class="upload_file_container">
Select file!
<input type="file" name="photo" />
</div>
The second, it's a CSS style, if you want to real more customization, just keeping your eyes is open :)
第二个，它是一个 CSS 样式，如果你想要更多的自定义，只需睁大眼睛:)
.upload_file_container{
width:100px;
height:40px;
position:relative;
background(your img);
}
.upload_file_container input{
width:100px;
height:40px;
position:absolute;
left:0;
top:0;
cursor:pointer;
}
This example hasn't style for text inside the button, it depends on font-size, just correct the height and padding-top values for container
此示例没有按钮内文本的样式，它取决于字体大小，只需更正容器的高度和填充顶部值
回答by drinor
The trick is hide the input and customize the label.
诀窍是隐藏输入并自定义标签。
HTML:
HTML：
<div class="inputfile-box">
<input type="file" id="file" class="inputfile" onchange='uploadFile(this)'>
<label for="file">
<span id="file-name" class="file-box"></span>
<span class="file-button">
<i class="fa fa-upload" aria-hidden="true"></i>
Select File
</span>
</label>
</div>
CSS:
CSS：
.inputfile-box {
position: relative;
}
.inputfile {
display: none;
}
.container {
display: inline-block;
width: 100%;
}
.file-box {
display: inline-block;
width: 100%;
border: 1px solid;
padding: 5px 0px 5px 5px;
box-sizing: border-box;
height: calc(2rem - 2px);
}
.file-button {
background: red;
padding: 5px;
position: absolute;
border: 1px solid;
top: 0px;
right: 0px;
}
JS:
JS：
function uploadFile(target) {
document.getElementById("file-name").innerHTML = target.files[0].name;
}
You can check this example: https://jsfiddle.net/rjurado/hnf0zhy1/4/
您可以查看此示例：https: //jsfiddle.net/rjurado/hnf0zhy1/4/
回答by Bogdan M.
It's much better if you just use a <label>, hide the <input>, and customize the label.
如果您只使用<label>、隐藏<input>和自定义标签，那就更好了。
HTML:
HTML：
<input type="file" id="input">
<label for="input" id="label">Choose File</label>
CSS:
CSS：
input#input{
display: none;
}
label#label{
/* Customize your label here */
}
回答by saghar.fadaei
to show path of selected file you can try this on html :
要显示所选文件的路径，您可以在 html 上尝试：
<div class="fileinputs">
<input type="file" class="file">
</div>
and in javascript :
在 javascript 中：
var fakeFileUpload = document.createElement('div');
fakeFileUpload.className = 'fakefile';
var image = document.createElement('div');
image.className='fakebtn';
image.innerHTML = 'browse';
fakeFileUpload.appendChild(image);
fakeFileUpload.appendChild(document.createElement('input'));
var x = document.getElementsByTagName('input');
for (var i=0;i<x.length;i++) {
if (x[i].type != 'file') continue;
if (x[i].parentNode.className != 'fileinputs') continue;
x[i].className = 'file hidden';
var clone = fakeFileUpload.cloneNode(true);
x[i].parentNode.appendChild(clone);
x[i].relatedElement = clone.getElementsByTagName('input')[0];
x[i].onchange = x[i].onmouseout = function () {
this.relatedElement.value = this.value;
}
}
and style :
和风格：
div.fileinputs {
position: relative;
height: 30px;
width: 370px;
}
input.file.hidden {
position: relative;
text-align: right;
-moz-opacity: 0;
filter: alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
right: 0;
width: 370px;
padding: 0;
margin: 0;
z-index: 1;
line-height: 90%;
}
div.fakefile input {
margin-bottom: 5px;
margin-left: 0;
border: none;
box-shadow: 0px 0px 2px 1px #ccc;
padding: 4px;
width: 241px;
height: 20px;
}
div.fakefile .fakebtn{
width: 150px;
background: #eb5a41;
z-index: 10;
font-family: roya-bold;
border: none;
padding: 5px 15px;
font-size: 18px;
text-align: center;
cursor: pointer;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
display: inline;
margin-left: 3px;
}
div.fileinputs input[type="file"]:hover + div .fakebtn{
background: #DA472E;
}
div.fileinputs input[type="file"] {
opacity: 0;
position: absolute;
top: -6px;
right: 0px;
z-index: 20;
width: 102px;
height: 40px;
cursor: pointer;
}
