如何使用HTML，JS和CSS创建自定义文件上载

Question

以下是我想要创建的控件的设计：

如您所见，除了上传控件的浏览按钮外，很容易创建设计。我创造了其余的。我一直在寻找改变浏览按钮的位置，但找不到任何有用的东西。

那么，该怎么做？有一个想法，如嵌入一个不可见的上传控制按钮，但任何其他建议是黄金的，谢谢。

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();
    });
});

Answer 2

以下是两篇优秀的文章，向您展示如何自定义文件输入的外观。

Filament Group

jQuery Custom File Upload Input: from the book Designing with Progressive Enhancement

Shaun Inman

Styling File Inputs with CSS and the DOM

Answer 3

另一个例子：

请参阅此Fiddle

<强> HTML：

<div class="button-green"><input class="file-upload" type="file">Upload File</div>

<强> 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;
}

Answer 4

对于不需要JavaScript的解决方案，您可以使用<label>：

<label for="upload">Upload</label>
<input type="file" id="upload" style="position:absolute; visibility:hidden"/>

这不适用于所有浏览器，即旧版和移动版Safari。要涵盖这些，请使用上述JavaScript解决方案。