javascript - 如何仅使用 HTML、JS 和 CSS 创建自定义文件上传

Question

这是我要创建的控件的设计:

如您所见，除了上传控件的浏览按钮之外，创 build 计很容易。我创造了其余的。我一直在寻找有关更改浏览按钮位置的信息，但找不到任何有用的信息。

那么，怎么做呢？有一个想法，比如在按钮上嵌入一个不可见的上传控件，但任何其他建议都是很好的，谢谢。

Answer 1

其实并没有你想象的那么复杂。查看this fiddle .随心所欲地设计按钮!

HTML

<input type="file" id="uploadme" />
<input type="button" id="clickme" value="Upload Stuff!" />

CSS

input[type=file] { 
    width: 1px; 
    visibility: hidden;
}

JavaScript

$(function(){
    $('#clickme').click(function(){
        $('#uploadme').click();
    });
});