jquery - 如何使选定的文件名可见？

Question

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

我的 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(标题)

document.create = document.createElement && function(s){
    var div;
    switch(s.charAt(0)){
        case    "#":
            div = document.createTextNode(s.substring(1));
            break;
        case    "<":
            div = document.createElement("div");
            div.innerHTML = s;
            div = div.removeChild(div.firstChild);
            break;
        default:
            div = document.createElement(s);
            for(var i = 1; i < arguments.length; i++)
                div.appendChild(document.create(arguments[i]));
            break;
    };
    return  div;
};

我的 body javascript 代码:

HTML(正文)

if(document.create)
    onload = function(){
        document.body.appendChild(
            document.create("<div class='upField'><input type='file' class='upFile hidden' name='upFile' onkeypress='return handleKey(event)'><div class='fakefile'><input><a class='button'>Select</a></div></div>")
        );
    };

任何帮助将不胜感激

Answer 1

为你的 javascript 添加这个到你的 fiddle

$(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");
    });
});