「駑馬十駕」 IT系情報を中心に調べた事をコツコツ綴っています。

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

基本的な取得方法の場合

HTMLサンプル

JavaScriptサンプル

実行サンプル


実行結果

◆Google Chrome ver.33

get_chrome

◆Mozilla FileFox ver.28

get_firefox

◆Internet Explorer ver.11

get_InternetExplorer11

応用的な使用方法

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

HTMLサンプル

JavaScriptサンプル

実行サンプル

Ads by Google

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">