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

【问题标题】：How Can I Create a Custom File Upload With Only HTML, JS and CSS如何仅使用 HTML、JS 和 CSS 创建自定义文件上传
【发布时间】：2011-08-13 05:40:07
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript html css

【解决方案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();
    });
});

【讨论】：

+1 好答案。我叉了你的小提琴。选择文件后，这将在按钮旁边的文本框中显示文件名。 jsfiddle.net/nKVkM
@jesse 是的，我想我会把这部分留给 OP 作为练习:)
@confeng 这不是它的工作原理。你接受一个答案是因为它是正确的，而不是因为你试图传播爱。
@confeng 标记您最常使用的答案，以实现您试图从问题中找出答案。如果你愿意，一旦你获得更多的代表，你可以回来投票给另一个。这里的想法是得到正确的答案:) 没有人真正关心积分或徽章或任何东西。分享知识很有趣！
公平地说。 @Jason 是唯一一个在这里真正给你答案的人。你完全可以接受他的回答。

【解决方案2】：

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

jQuery Custom File Upload Input: from the book Designing with Progressive Enhancement 由 Filament Group 提供

Styling File Inputs with CSS and the DOM 作者：Shaun Inman

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

另一个例子：

看到这个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;
}

【讨论】：