造型战斧上传文件组件答案

【问题标题】：Styling tomahawk upload file component造型战斧上传文件组件
【发布时间】：2014-08-15 15:01:59
【问题描述】：

我正在尝试设置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);}

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

【问题讨论】：

$('.replace-upload').val($('.file-real')[0].files[0].name);或者也许只是 val() 是您需要的唯一更改...
文件[0]指的是什么？

标签： javascript html css jsf-2

【解决方案1】：

我用$('.replace-upload').val(x); 替换了$('.replace-upload').text(x);，它成功了。

【讨论】：