样式化输入类型＝“;文件“-否”;没有选择文件“;显得

Styling input type="file" - no "No file selected" appear

本文关键字：文件 有选择 显得 样式 输入 类型      更新时间：2023-09-26

我最近决定尝试设计input type="file"的样式。设计工作几乎很好，唯一的问题是我想要的文本"没有选择文件"；出现在filename选择中。即使我选择了一个文件，也不会显示任何文本。如果有任何帮助和解释，我将不胜感激！

我有以下代码：HTML

<div class="fileuploader">
  <input type="text" class="filename" disabled="disabled" />
  <input type="button" name="file" class="filebutton" value="Browse" />
  <input type="file" name="avatar" />
</div>

并遵循CSS

.fileuploader {
    position: relative;
    display: inline-block;
    overflow: hidden;
    cursor: default;
}
.filename {
    float: left;
    display: inline-block;
    outline: 0 none;
    height: 30px;
    width: 302px;
    overflow: hidden;
    border: 1px solid #CCCCCC;
    color: #777;
    text-shadow: 1px 1px 0px #fff;
    border-radius: 5px 0px 0px 5px;
    box-shadow: 0px 0px 1px #fff inset;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 6px 10px;
}

    .filebutton {
        float: left;
        height: 30px;
        display: inline-block;
        outline: 0 none;
        cursor: pointer;
        border: 1px solid #CCCCCC;
        border-radius: 5px 5px 5px 5px;
        box-shadow: 0 0 1px #fff inset;
        color: #555555;
        margin-left: 3px;
        padding: 6px 12px;
        background: #DDDDDD;
        background:-moz-linear-gradient(top, #EEEEEE 0%, #DDDDDD 100%);
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #EEEEEE), color-stop(100%, #DDDDDD));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#EEEEEE', endColorstr='#DDDDDD', GradientType=0);
    }
    .fileuploader input[type=file] {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        border: 0;
        height: 30px;
        cursor: pointer;
        filter:alpha(opacity=0);
        -moz-opacity: 0;
        -khtml-opacity: 0;
        opacity: 0;
        margin: 0;
        padding: 0;
    }

我希望在文件名选择中显示文本"未选择文件"。即使我选择了一个文件，也不会显示任何文本。

一种解决方案是每当文件输入触发JavaScript"更改"事件时更新文件名。使用jQuery的$.change（）函数可以很容易地实现这一点：

$(document).ready(function() {
    $('input[type="file"]').change(function() {
        var val = ($(this).val()) ? $(this).val() : "No file selected.";
        $('.filename').attr('placeholder', val);
    });
});

http://api.jquery.com/change/

我创建了一个包含以下功能的jsFiddle：http://jsfiddle.net/cfY6m/1/

相关文章：