JavaScript:Input「type=”file”」形式からの値取得についてのブラウザ別挙動

JavaScriptでInput「type=”file”」形式から値を取得する場合、ブラウザによって挙動が異なるので整理しておきます。
通常、type=”file”形式から値を取得した場合はセキュリティ的観点からほとんどのブラウザではファイル名部分しか取得出来ませんが、ブラウザ毎で微妙に挙動が変わるようです。

基本的な取得方法の場合

HTMLサンプル

JavaScriptサンプル

実行サンプル


実行結果

◆Google Chrome ver.33

◆Mozilla FileFox ver.28

◆Internet Explorer ver.11

応用的な使用方法

デフォルトの参照ボタンでは見栄え操作性共にあまりよいものではありません。ここでは参照ボタンの代わりに画像ボタンを用意してそこからエクスプローラを起動させるように変更しています。これでブラウザ毎での違いは発生しなくなります。

HTMLサンプル

JavaScriptサンプル

実行サンプル

コメントを残す

メールアドレスが公開されることはありません。

email confirm*

post date*