Question

我正在使用修改后的输入按钮供用户上传文件。

我找到了这个小提琴并使用了相同的确切代码并成功生成了一个有效的CSS按钮。 http://jsfiddle.net/geniuscarrier/ccsGK/

<div class="fileUpload btn btn-primary">
    <span>Uploads</span>
    <input type="file" class="upload" />
</div>

.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

唯一的问题是，一旦我使用按钮上传文件，通常显示在命名已选择文件的按钮右侧的消息就会消失。

因此，用户无法判断文件是否已被选中。有办法解决这个问题吗？

Answer 1

使用js / jQuery读取上传的文件名，并将其作为文本放在<span></span>内（或任何其他地方）。

$('.upload').change(function(){
    $('.fileUpload > span').text($(this).val());
});

Answer 2

这是由opacity: 0 css规则.fileUpload input.upload引起的。将其更改为5，您将看到原始文件控件即将出现。但是，以这种方式使用文件上载控制通常需要使用所选文件填充的标签/跨度。所选文件的名称，您可以从JavaScript获得。

Answer 3

我不确定您的要求是什么，但似乎您正在尝试设置文件输入按钮的样式。

如果您没有需要支持旧浏览器的要求，可以使用-webkit-file-upload-button和-ms-browse属性来定位特定按钮。这仅适用于IE10及更高版本以及现代webkit浏览器。我根据你的css修改了以下内容，以便它可以工作：

.fileUpload {
    position: relative;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 10px;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
}
input.upload::-webkit-file-upload-button{
  visibility: hidden;
}

input.upload::-ms-browse{
  visibility: hidden;
}

这将允许您隐藏按钮部分，您可以将按钮放在现有的自定义按钮的顶部。您也可以在隐藏按钮后直接定位输入字段。例如。

input.upload::before{
    content: 'Uploads';
    background:#00f;
    color:#fff;
}

格式类型=带CSS的文本按钮

3 个答案: