Javascript 如何创建仅使用HTML、JS和CSS的自定义文件上载

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

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

---

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

这里有两篇优秀的文章，介绍如何自定义文件输入的外观

由灯丝组提供

---

肖恩·英曼（Shaun Inman）

它实际上并不像你想象的那么复杂。退房如何设计你的按钮

HTML

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

JavaScript

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

另一个例子：

看到这个了吗

HTML:

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

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

---

对于不需要JavaScript的解决方案，可以使用

：

上传

---

这不适用于所有浏览器，即旧浏览器和mobile Safari。要解决这些问题，请使用上述JavaScript解决方案。

+1回答得好。我用叉子叉了你的小提琴。选择文件后，将在按钮旁边的文本框中显示文件名@杰西：是的，我想我会把这部分留给OP作为练习：）@confeng这不是它的工作原理。你接受一个答案是因为它是正确的，而不是因为你在试图传播爱。@pending mark无论你用了哪一个答案来达到你想从你的问题中得到的结果。如果你愿意，一旦你获得更多的代表权，你可以回来投票给另一个。这里的想法是为了得到正确的答案：）没有人真正在乎分数、徽章或任何东西。分享知识很有趣！公平地说@杰森是唯一一个真正给你答案的人。你完全应该接受他的回答。

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

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