html - 文件上传跨浏览器问题

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;
}

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