javascript - 样式战斧上传文件组件

Question

我正在尝试设置 t:inputFileUpload 元素的样式，我尝试了这个解决方案 styling an input type=file ，这是将另一个输入元素和图像放在 t:inputFileUpload 占用的相同位置。这就是我的代码

<div id="file-div">
    <h:inputText styleClass="replace-upload" id="fake-input" />
        <div class="browse-img">
            <span class="browse-button">#{msgs.select}</span>
        </div>
    <t:inputFileUpload id="file" value="#{createListBean.uploadedFile}"
        size="22" accept=".xls,.xlsx,.csv" type="file" style="z-index :2;opacity:0;position:relative;"
        onchange="changeFakeFile()" styleClass="file-real" />
</div>

还有我的造型

.replace-upload {
    border: 1px solid #EEEEEE !important;
    border-radius: 3px 3px 3px 3px !important;
    box-shadow: 2px 2px 0 0 #CCCCCC inset !important;
    color: #333333 !important;
    font-size: 14px !important;
    margin-top: -5px;
    padding: 5px !important;
    width: 157px !important;
    position: absolute;
    z-index: 1;
}

.browse-img {
    background-color: #333333;
    color: #FFFFFF;
    width: 76px;
    position: absolute;
    left: 171px;
    top:-2px;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 1px #000000;
}

.browse-button {
    color:#FFFFFF;
    cursor: pointer;
    display: block;
    font-size: 12px;
    font-weight: bold;
    line-height: normal;
    padding: 5px 18px;
    text-decoration: none;
}

现在，当用户点击假输入元素时，他实际上是点击了战斧元素，主要问题是他选择的路径没有显示在假输入上，这就是为什么我向它添加了一些 javascript 函数

changeFakeFile(){
    var x = $('.file-real').val();
    $('.replace-upload').text(x);}

问题是假的输入值被改变了但是这个值没有显示给用户，如何让它显示出来？

Answer 1

我将 $('.replace-upload').text(x); 替换为 $('.replace-upload').val(x);它奏效了。