inputタグのtype=fileの初期化

jQueryでinputタグのtype=fileにて選択されたファイル情報を初期化するのに.val("")で初期化を行っていたのですが、IE10以下の場合だと初期化されないということがわかりました。（IE11は初期化されました。）

以下のファイル添付とテキストボックスをIE10以下で実行してみてください。（IE11でも互換モードでIE10以下にすれば同様の動作になります。）

【ファイル添付】

 

【テキストボックス】

IE10や9、8の場合「ファイル名クリア」を押しても選択されているファイルが初期化されなかったと思います。

 

サンプルのソース

[javascript] <script type="text/javascript"> function getValue(id){ var value = $("#"+id).val(); window.alert(value ); } function clearValue(id){ $("#"+id).val(""); } </script> [/javascript] [html] <p> <input type="file" id="demoFile"> <input type="button" value="ファイル名表示" onclick="getValue('demoFile');"> <input type="button" value="ファイル名クリア" onclick="clearValue('demoFile');"> </p> <p> <input type="text" id="demoText"> <input type="button" value="テキスト表示" onclick="getValue('demoText');"> <input type="button" value="テキストクリア" onclick="clearValue('demoText');"> </p> [/html]

このままだとIE10以下の場合クリア処理させたいときに初期化できないので、違う方法を用いて初期化を行います。

初期化に対応するにはreplaceWithとcloneを用いて添付ファイルの要素をコピーし、置き換える方法をで初期化を行います。

IE10以下に対応したソース

[javascript] function clearValue(id){ $("#"+id).replaceWith($("#"+id).clone()); } [/javascript]

要素コピー＋置き換え処理になるのでValueを空にするよりも遅くなりますが、クリアする要素が少ない場合だと特に問題はないと思います。

（もっと簡単にできる方法がないかな。。。）