Question

找到下面显示的this example，它对输入按钮设置了样式，因此单击它时将打开文件资源管理器。你有一个类似的按钮，可以支持像常规输入一样拖放的功能吗？

input[type="file"] {
    display: none;
}
.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

<label for="file-upload" class="custom-file-upload">
    <i class="fa fa-cloud-upload"></i> Custom Upload
</label>
<input id="file-upload" type="file"/>

Answer 1

是的，在您的示例中，您将实际输入的display属性设置为none，从而消除了能够拖放的常规行为。

我认为使用这个示例你可以做的最好，只使用CSS和HTML将不透明度设置为0并将文件输入覆盖在自定义按钮的顶部，但它有点俗气，我建议也许一些聪明的jQuery用法，如果你想扩展它并实际显示正在上传的文件等。

小提琴：http://jsfiddle.net/4cwpLvae/1042/

input[type="file"] {
    display: inline-block;
    opacity: 0;
    position: relative;
    top: -18px;
}
.custom-file-upload {
    border: 1px solid #ccc;
    text-align: center;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    width: 140px;
    height: 25px;
}

<label for="file-upload" class="custom-file-upload">
    <i class="fa fa-cloud-upload"></i> Custom Upload
    <br>
    <input placeholder="none" id="file-upload" type="file"/>
</label>

是否可以设置文件输入类型的样式，以便它仍然允许拖放？

1 个答案: