文件上传跨浏览器问题

Question

传统上我们使用<input type="file">来上传文件，但是这个元素在不同的浏览器（例如firefox和chrome）上没有一致的行为。它看起来只是chrome上的一个按钮而在firefox上它显示为文本字段以及文件上传按钮。     我用来克服这个问题的CSS解决方案如下：

HTML:

    <div class="fileinputs">
    <html:file name="importForm" property="formFile" styleClass="file"/>
    <div class="fakefile">
    <input/>
    <input type="button" value="Browse"/>
    </div>
    </div>

CSS:


div.fileinputs {
    position: relative;
}

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

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

此解决方案解决了不一致的行为，但所选文件未显示在文件输入字段中。我们如何克服此问题？