殴り書きのメモ: input type="file"のonchangeイベントで各ブラウザの挙動が異なる

ファイルを選択するとアラートが表示されるHTMLを(サンプル1)、下記手順で実行してみる。
1：何らかのファイルを選択する。
2：再度選択ボタンを押した後にキャンセルする。

IEとFirefoxでは何も起きないが、Chromeではアラートが表示される。

サンプル1(ココをクリックで開閉)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script type="text/javascript"></script>
  </head>
  <body>
    <form>
      <input type="file" id="Myfile" onchange=alert("ok")>
    </form>
  </body>
</html>

少し掘り下げて調査するため、ファイルを選択するとファイル名、選択されていない場合はメッセージを表示するHTMLを(サンプル2)、上記と同一手順で実行してみた。
IEとFirefoxではファイル名が、Chromeではメッセージ「nothing!」が表示される。

つまり、キャンセルした時、IE,Firefoxでは前回選択したファイル名を選択し続け、
Chromeでは何も選択していない状態に変わっている。

サンプル2(ココをクリックで開閉)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script type="text/javascript">
      function checkFile(){
        var file = document.getElementById("Myfile").files[0];
        if(file){
          alert(file.name);
        }else{
          alert("nothing!");
        }
      }
    </script>
  </head>
  <body>
    <form>
      <input type="file" id="Myfile" onchange="checkFile()")>
    </form>
  </body>
</html>

正しい挙動はどちらなのかは分からないが、揃えてほしいと思う。

面倒くせぇ。

なお、実施環境は下記。
OS: Windows 7 Progessional(64bit) Service Pack1
Firefox: 23.0.1
IE: 10.0.9200.16660
Chrome: 28.0.1500.95m

殴り書きのメモ

2013年8月17日土曜日

input type="file"のonchangeイベントで各ブラウザの挙動が異なる

0 件のコメント:

コメントを投稿