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

我正在使用修改的输入按钮让用户上传文件。格式化类型=带有CSS的文本按钮

我发现这个小提琴，并使用相同的确切代码，并成功地生成一个工作的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); 
}

唯一的问题是，一旦我使用该按钮来上传文件，典型地表示到按钮命名已选择走了文件的正确信息。

因此，用户不可能分辨文件是否被选中。有没有解决的办法？

来源

2014-07-01 Kevin

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

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

来源

2014-07-01 07:34:23 Justinas

对不起，我的无知，但你可以请更具体一点，如何做到这一点？我把你的代码放在范围内的

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

来源

2014-07-01 07:39:07 Sadi

我不完全确定你的要求是什么，但它似乎是你试图设置文件输入按钮的样式。

如果您没有需要支持旧浏览器的要求，则可以使用-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; 
}

来源

2014-07-02 09:14:32 user1439090

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

回答

相关问题