HTMLアップロードファイル小さな操作

Question

私はIE8にこのコードを使用すると、ファイルが細かいHTTPリクエストを介して送信されます。

<form action="http:localhost:8080/myApp" 
enctype="multipart/form-data" method="post"> 
<p> 
Type some text (if you like):<br> 
<input type="text" name="textline" size="30"> 
</p> 
<p> 
Please specify a file<br> 
<input type="file" name="datafile" size="40"> 
</p> 
<div> 
<input type="submit" value="Send"> 
</div> 
</form> 

が、私は別の中間のボタンを追加するとき、「ファイルを追加」、あなたのように下の「ブラウズ」ボタンを押すのではなく、ファイルがサーバー側に送信されないのはなぜですか？

<form action="http:localhost:8080/myApp" 
enctype="multipart/form-data" method="post"> 
<p> 
Type some text (if you like):<br> 
<input type="text" name="textline" size="30"> 
</p> 
<p> 
Please specify a file<br> 
<input id="fileChooser" type="file" name="datafile" size="40"> 
</p> 
<button onclick="document.getElementById('fileChooser').click()">Add File</button> 
<div> 
<input type="submit" value="Send"> 
</div> 
</form> 

Answer 1

不透明度を0に設定して入力ファイルの実際の入力を隠してから、その上に偽のボタンを置きます（小さい数字はz-index）。このようにして偽のボタンをクリックすると、ユーザーは実際に下にある実際のボタンをクリックし、あなたが望む視覚効果を達成します。

Answer 2

変更イベントハンドラ：

<button onclick="document.getElementById('fileChooser').click(); return false">Add File</button> 

あなたのボタンは "選択" の要素として作用していました。あなたはまた、それが明示的にボタンの種類を設定することで動作させることができ、私は思う：

<button onclick="document.getElementById('fileChooser').click()" type='button'>Add File</button> 

さて、これはクロム、多分Safariで動作し、あなたはそれがファイルチューアップを取得限りIE8で動作することになりましたと言います。しかし、Firefoxは入力ファイルを処理するためにもっと厳しいと思われるので、Firefoxでは動作しません。

Answer 3

OK記事を読んでください。明らかにそれは不可能です。 多くの面で、HTML5とIE9が迷惑なアップロードボタンのカスタマイズを改善することを願っています。