Javascript 如何仅使用 HTML、JS 和 CSS 创建自定义文件上传
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5794039/
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 Can I Create a Custom File Upload With Only HTML, JS and CSS
提问by kubilay
Here is the design of the control I want to create:
这是我要创建的控件的设计：
As you can see, it's easy to create the design except the browse button of upload control. I created the rest. I've been searching about changing the place of Browse button but could not find anything useful.
如您所见，除了上传控件的浏览按钮外，创建设计很容易。我创造了其余的。我一直在寻找更改浏览按钮的位置，但找不到任何有用的东西。
So, how to do that? There was an idea like embedding an unvisible upload control over button but any other advice is golden, thanks.
那么，该怎么做呢？有一个想法，比如在按钮上嵌入一个不可见的上传控制，但任何其他建议都是黄金，谢谢。
回答by Jason
It's actually not as complicated as you may think. Check out this fiddle. Stylize your button how you will!
它实际上并不像你想象的那么复杂。看看这个小提琴。风格化你的按钮，你会怎么做！
HTML
HTML
<input type="file" id="uploadme" />
<input type="button" id="clickme" value="Upload Stuff!" />
CSS
CSS
input[type=file] {
width: 1px;
visibility: hidden;
}
JavaScript
JavaScript
$(function(){
$('#clickme').click(function(){
$('#uploadme').click();
});
});
回答by jessegavin
Here's are two excellent articles which shows you how to customize the appearance of file inputs.
这是两篇出色的文章，向您展示了如何自定义文件输入的外观。
jQuery Custom File Upload Input: from the book Designing with Progressive Enhancementby the Filament Group
jQuery 自定义文件上传输入：来自Filament Group 的Designing with Progressive Enhancement 一书
Styling File Inputs with CSS and the DOMby Shaun Inman
Shaun Inman使用 CSS 和 DOM 设计文件输入样式
回答by user10
another example:
另一个例子：
see this Fiddle
看到这个小提琴
HTML:
HTML：
<div class="button-green"><input class="file-upload" type="file">Upload File</div>
CSS:
CSS：
.button-green
{
font-family: "Segoe UI","Segoe","Verdana";
background: #0f9e0a center top no-repeat;
background-image: linear-gradient(rgb(15, 158, 10), rgb(24, 105, 21));
overflow: hidden;
color: white;
border-radius: 5px;
width: 82px;
position: relative;
padding: 8px 10px 8px 10px;
}
.button-green:hover
{
background: #0a8406 center top no-repeat;
background-image: linear-gradient(rgb(12, 141, 8), rgb(19, 88, 17));
}
.file-upload
{
opacity: 0;
width: 102px;
height: 35px;
position: absolute;
top: 0px;
left: 0px;
}
回答by Steven Vachon
For a solution that does not require JavaScript, you could use a <label>:
对于不需要 JavaScript 的解决方案，您可以使用<label>：
<label for="upload">Upload</label>
<input type="file" id="upload" style="position:absolute; visibility:hidden"/>
This won't work in every browser, namely older ones and mobile Safari. To cover these, use the above mentioned JavaScript solution.
这不适用于所有浏览器，即较旧的浏览器和移动 Safari。要涵盖这些，请使用上面提到的 JavaScript 解决方案。
