jQuery 自定义图片上传的文件按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16080644/
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
customize the file button for image upload
提问by Sébastien Garmier
I am placed a button for upload image files.I want to customize that button, i want to add more than one image file ,what is the logic to achive.
我放置了一个用于上传图像文件的按钮。我想自定义该按钮，我想添加多个图像文件，实现的逻辑是什么。
<input type="file" />,this is rendering a choose button with a text saying `no files choosen` in the same line.
Is it possible to customize the text "no files choosen"below the choosebutton.Meanwile i wise to keep an camera image before the no files choosentext.
是否可以自定义按钮no files choosen下方的文本“ ”。choose同时，我明智地在no files choosen文本之前保留相机图像。
How to perform this to improve my site.
如何执行此操作以改进我的网站。
Thanks
谢谢
回答by Sébastien Garmier
You can hide the input by placing it into a div which is height:0pxand overwflow:hidden. THen you add a button or an other html element which you can style as you want. In the onclick event you get the input field using javascript or jQuery and click it:
您可以通过将输入放入一个 div 来隐藏输入，该 div 是height:0px和overwflow:hidden。然后添加一个按钮或其他 html 元素，您可以根据需要设置样式。在 onclick 事件中，您使用 javascript 或 jQuery 获取输入字段并单击它：
<div style="height:0px;overflow:hidden">
<input type="file" id="fileInput" name="fileInput" />
</div>
<button type="button" onclick="chooseFile();">choose file</button>
<script>
function chooseFile() {
$("#fileInput").click();
}
</script>
Now the input is hidden, but you can style the button as you want, it will always open the file input on click.
现在输入是隐藏的，但是您可以根据需要设置按钮的样式，它始终会在单击时打开文件输入。
If you don't want to use jQuery replace the script tag with this script tag:
如果您不想使用 jQuery，请使用此脚本标签替换脚本标签：
<script>
function chooseFile() {
document.getElementById("fileInput").click();
}
</script>
回答by Sowmya
Try this manipulated solution. (I tried it today for one of my project :) )
试试这个操纵解决方案。（我今天为我的一个项目尝试了它:)）
HTML
HTML
<div class="choose_file">
<span>Choose File</span>
<input name="Select File" type="file" />
</div>
CSS
CSS
.choose_file{
position:relative;
display:inline-block;
border-radius:8px;
border:#ebebeb solid 1px;
width:250px;
padding: 4px 6px 4px 8px;
font: normal 14px Myriad Pro, Verdana, Geneva, sans-serif;
color: #7f7f7f;
margin-top: 2px;
background:white
}
.choose_file input[type="file"]{
-webkit-appearance:none;
position:absolute;
top:0; left:0;
opacity:0;
}
回答by Debasis Panda
You can customize it using only CSS. Go through the link below.
HTML
您可以仅使用 CSS 对其进行自定义。通过下面的链接。
HTML
<label class="btn-upload">
<input type="file" name="fileupload">
<button class="btn">Browse</button>
</label>
.btn-upload {
position: relative;
overflow: hidden;
display: inline-block;
}
.btn-upload input[type=file] {
position: absolute;
opacity: 0;
z-index: 0;
max-width: 100%;
height: 100%;
display: block;
}
.btn-upload .btn{
padding: 8px 20px;
background: #337ab7;
border: 1px solid #2e6da4;
color: #fff;
border: 0;
}
.btn-upload:hover .btn{
padding: 8px 20px;
background: #2e6da4;
color: #fff;
border: 0;
}
http://imdebasispanda.blogspot.in/2015/08/custom-upload-button-using-css.html
http://imdebasispanda.blogspot.in/2015/08/custom-upload-button-using-css.html
回答by J.Mbai
<body>
<style>
.image{
position:relative;
display:inline-block;
width:3%;
padding: 0%;
}
.image input[type="file"]{
-webkit-appearance:none;
position:absolute;
top:0; left:0;
opacity:0;
}
</style>
<div class="image">
<span><img src='admin/ico/fms.ico' class "image"></span>
<input name="image" type="file" />
</div>
</body>
