Jquery 如何使所选文件名可见？

我需要一些帮助来完成我的自定义文件输入代码。所选文件名不可见。如何解决这个问题？这就是我想到的：

我的CSS代码：

CSS

div.upField {
    position: relative;
}

div.fakefile {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
}

.upField input,.fakefile input {
    border:1px solid #0E0E0E;
    color:#FEFEFE;
    font-family:Arial,Helvetica,sans-serif;
    font-size:22px;
    background:#2E2E2E;
    outline:none; /* Preventing the default Safari and Chrome text box highlight */
    /* CSS3 box shadow, used as an inner glow */
    -moz-box-shadow:0 0 20px #292929 inset;
    -webkit-box-shadow:0 0 20px #292929 inset;
    box-shadow:0 0 20px #292929 inset;
    -moz-border-radius:12px;
    -webkit-border-radius:12px;
    border-radius:12px;
}

.fakefile input {
    margin: -3px 0px;
}

input {
    width: 650px;
}

input.upFile {
    position: relative;
    text-align: right;
    -moz-opacity:0 ;
    filter:alpha(opacity: 0);
    opacity: 0;
    z-index: 2;
}

.button {
    -moz-box-shadow:inset 0px 1px 0px 0px #fff6af;
    -webkit-box-shadow:inset 0px 1px 0px 0px #fff6af;
    box-shadow:inset 0px 1px 0px 0px #fff6af;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23) );
    background:-moz-linear-gradient( center top, #ffec64 5%, #ffab23 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23');
    background-color:#ffec64;
    -moz-border-radius:12px;
    -webkit-border-radius:12px;
    border-radius:12px;
    border:1px solid #0E0E0E;
    display:inline-block;
    color:#333333;
    font-family:arial;
    font-size:22px;
    font-weight:bold;
    padding: 1px 6px 0px 6px;
    margin-left: -78px;
    text-decoration:none;
    text-shadow:1px 1px 0px #ffee66;
}

.button:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64) );
    background:-moz-linear-gradient( center top, #ffab23 5%, #ffec64 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64');
    background-color:#ffab23;
}

.button:active {
    position:relative;
    top:1px;
}

我的头javascript代码：

HTML（Head）

document.create=document.createElement&&function{
var-div；
开关（s.charAt（0））{
案例“#”：
div=document.createTextNode（s.substring（1））；
打破
case“将此javascript添加到小提琴中

$(function() {
    $('input[name="upFile"]').change(function(e) { 
        $(".fakefile input").val($(this).val()); 
    });
})

但是，如果您希望它更具动态性，以便可以反复使用该html：

$(function() {
    $(".upField").each(function(e) {
        $(this).children('input[name="upFile"]').on("change", function(e) {
            var parent = $(this).parent(".upField");
            $(this).next("div").children("input").val($(this).val());
        })
            .next("div").children("input").val("Click/Push to Select");
    });
});

，这是结束输入标记还是开始标记？如果您设置了一个或发布HTML，那么伪输入标记来掩盖真实输入标记可以帮助您很多（尤其是您的jQuery，因为您几乎不使用任何jQuery）。
$(function() {
    $('input[name="upFile"]').change(function(e) { 
        $(".fakefile input").val($(this).val()); 
    });
})

$(function() {
    $(".upField").each(function(e) {
        $(this).children('input[name="upFile"]').on("change", function(e) {
            var parent = $(this).parent(".upField");
            $(this).next("div").children("input").val($(this).val());
        })
            .next("div").children("input").val("Click/Push to Select");
    });
});