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

このソリューションは一貫性のない動作を解決しますが、選択したファイルがファイル入力フィールドに表示されません。この問題を解決するにはどうすればよいですか?