Javascript 自定义上传按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6461252/
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
Custom Upload Button
提问by daka
hi i was just wondering how you can create you own custom file upload button, because the best i can do is
嗨，我只是想知道如何创建自己的自定义文件上传按钮，因为我能做的最好的是
and what i want to achieve is
我想要实现的是
if there is anyway of doing this i would be very thankful, and please can i have answers that explain how to do it with code and not answers with links to websites that allow you to download a button or something like that,Thank You :)
如果有任何方式这样做，我将非常感激，请我能有答案来解释如何使用代码而不是包含允许您下载按钮或类似内容的网站链接的答案，谢谢:)
回答by natedavisolds
Although some of these answers will create something that looks like you want it to work, they will break down when they try to perform the way that you expect. The file input doesn't style well directly and you will have trouble trying it. However, there is a trick.
尽管其中一些答案会创建看起来像您希望它工作的东西，但当它们尝试按照您期望的方式执行时，它们会崩溃。文件输入的样式不直接，您将无法尝试。然而，有一个技巧。
The trick is to turn the opacity of the input to 0 and then change the background underneath it to the button style that you want.
诀窍是将输入的不透明度设为 0，然后将其下方的背景更改为您想要的按钮样式。
.file_button_container,
.file_button_container input {
height: 47px;
width: 263px;
}
.file_button_container {
background: transparent url(http://i.stack.imgur.com/BT5AB.png) left top no-repeat;
}
.file_button_container input {
opacity: 0;
}<div class="file_button_container"><input type="file" /></div>回答by Alexandru Bangal?
I think you can also try doing it this way:
Creating an additional <label for="X"></label>element which you can style easily with CSS
我认为您也可以尝试这样做：
创建一个<label for="X"></label>可以使用 CSS 轻松设置样式的附加元素
<div class="container">
<label for="upload" class="uploadButton">Upload</label>
<input type="file" name="upload" id="upload">
</div>
like
喜欢
.container {
position: relative;
}
.uploadButton {
height: 25px;
width: 66px;
display: block;
cursor: pointer;
background: url('http://www.ifunia.com/images/christmas/youtube-upload-button.gif') center center no-repeat;
}
input[type="file"] {
display: block;
width: 66px;
height: 25px;
clip: rect(0px 0px 0px 0px);
position: absolute;
left: 0;
top: 0;
}<form>
<div class="container">
<label for="upload" class="uploadButton"></label>
<input type="file" name="upload" id="upload" required />
</div>
<hr/>
<button type="submit">Submit</button>
</form>回答by Sam
Use CSS to style the button by its id or class.
使用 CSS 按 id 或 class 设置按钮样式。
This might help: http://speckyboy.com/2009/05/27/22-css-button-styling-tutorials-and-techniques/
这可能会有所帮助：http: //speckyboy.com/2009/05/27/22-css-button-styling-tutorials-and-techniques/
回答by Trey
The arrow isn't something you can "just do with code" and the rounded corners would work fine in firefox, but not in ie using css... if you just need to use a custom image it's easy:
箭头不是你可以“只用代码来做”的东西，圆角在 Firefox 中可以正常工作，但不能在 ie 使用 css 中......如果你只需要使用自定义图像，这很容易：
css:
css：
#my_upload_button{
background-image:url(path-to-file.png);
border:none;
}
回答by Gabriele Petrioli
Here is an approximation to the button you want with css/html
这是你想要的 css/html 按钮的近似值
html
html
<button class="upload">Choose a file to upload...</button>
css
css
.upload{
border:0;
padding:10px 20px;
-moz-border-radius:10px;
border-radius:10px;
background-color:#4488ee;
color:white;
font-size:16px;
}
demo http://jsfiddle.net/gaby/qdX5d/2/
演示http://jsfiddle.net/gaby/qdX5d/2/
for rounded corners in pre-IE9 use css3pie
对于 IE9 之前的圆角使用css3pie
回答by Alex
Step 1. Create a simple html markup
步骤 1. 创建一个简单的 html 标记
<div class="fileUpload btn btn-primary">
<span>Upload</span>
<input type="file" class="upload" />
</div>
Step 2. CSS: Tricky Part
第 2 步。 CSS：棘手的部分
.fileUpload {
position: relative;
overflow: hidden;
margin: 10px;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
For demo see here 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 Ormoz
Use the input's label as custom upload button:
使用输入的标签作为自定义上传按钮：
<label for="pic" class="uploadfilelabel" >upload </label>
<input type="hidden" name="MAX_FILE_SIZE" value="110000">
<input id="pic" name="pic" type="file" size="110000">
and CSS:
和 CSS：
label.uploadfilelabel{/*custom label here*/}
input[type=file]{display:none;}
Notice that we did not display the main input button, because otherwise it will occupy space
注意我们没有显示主输入按钮，否则会占用空间
回答by Anup Yadav
I'm too late to answer but someone surely will find this useful in future, no need to use of Javascript or Hidden field too. If you are using Bootstrap then definitely there's no need of btn CSS as well.
我回答得太晚了，但将来肯定有人会发现这很有用，也不需要使用 Javascript 或 Hidden 字段。如果您使用的是 Bootstrap，那么肯定也不需要 btn CSS。
#upload_file
{
display: none;
}
.btn-primary {
background-color: #007bff;
border-color: #007bff;
color: #fff;
}
.btn {
-moz-user-select: none;
border: 1px solid transparent;
border-radius: 0.25rem;
display: inline-block;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
padding: 0.375rem 0.75rem;
text-align: center;
transition: color 0.15s ease-in-out 0s, background-color 0.15s ease-in-out 0s, border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
vertical-align: middle;
white-space: nowrap;
}<label for="upload_file" class="custom-file-upload btn btn-primary"><i class="fa fa-cloud-upload"></i> File Upload</label>
<input class="margin" type="file" formnovalidate id="upload_file" name="file" accept="*">