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

Question

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

样本设计

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

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

Answer 1

它实际上并不像你想象的那么复杂.看看这个小提琴.为您的按钮设计风格!

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好答案.我分叉你的小提琴.这将在选择文件时在按钮旁边的文本框中显示文件名.http://jsfiddle.net/nKVkM/ (8认同)
@confeng这不是它的工作原理.你接受答案是因为这是正确的,而不是因为你试图传播爱情. (4认同)
公平起见.@Jason是唯一真正给你答案的人.你接受他的回答是完全合适的. (4认同)
@confeng标记您最常使用的答案,以实现您试图从您的问题中找出的答案.如果你想要,一旦你获得更多的代表,你可以回来并提升另一个.这里的想法是得到正确的答案:)没有人真的关心点或徽章或任何东西.分享知识真的很有趣! (3认同)

Answer 2

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

jQuery自定义文件上传输入:来自 Filament Group的"使用渐进增强设计"一书

Answer 3

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

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

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