JavaScriptで<input type="file">で選択されたファイルサイズを取得する〜IE編〜

先日作った、画像ファイルが選択されたら、ファイルアップロードを行う処理↓↓

struts+jQuery Form Pluginを使ったファイルアップロード① - わたしの日記だよ

ですが、JavaScriptでファイルサイズをチェックする処理を入れていたものの

IE8だとチェックが効かないよ！と言われてしまいました。

１．現在の実装

今のjsファイルはこんな感じ。（赤字の部分です）

fileupload = function(event) {
  var $form, target;
  target = event.target ? event.target : event.srcElement;
  $form = $(target).closest('form');

  return $form.ajaxSubmit({
    'target': "body",
    'cache': false,
    'beforeSubmit': function(formData, jqForm, options) {
      // ファイルサイズチェックなどの処理
      for (var i = 0; i < formData.length; i++) {
        if (formData[i]["name"] == "imgFile") {
	  var file = formData[i]["value"];
          if (file.size > 200000) {
	    alert("画像は200KB以内のファイルを選択してください。");
	    return false;
	  }
        }
      }
    },
    'success': function(filename) {
      // アップロード成功時の処理
      alert("success");
    }
  });
};

 jsp側は、前回のエントリ参照。と言っても、ただformの中にtype="file" name="imgFile"のinputタグがあるだけです。

上記のコードだと、File APIに対応しているブラウザでないとダメなのですね。

こちら↓↓によると、IEだと対応しているのは10以降。

JavaScriptでローカルファイルを自在に操る - File API | Think IT（シンクイット）

２．回避策・・・imgオブジェクトを使用して取得する

こんなページを見つけました。

任意のファイルのファイルサイズを取得する

選択されたファイルを、一度imgオブジェクトにセットするとサイズが取得できるらしい！

↑↑のページでは、画面に実際にちいさーく表示されるimgを置いていたのですが

なるべく余計な要素を追加したくないので、newしてなんとかならないか、試してみます。

変更後のjsはこんな感じ。

（赤字だった部分だけ。「formname」部分は実際のformのname属性です）

  // File APIチェック
  if (window.File) {
    // File API対応
    var file = formData[i]["value"];
  } else {
    // File API非対応
    var file = new Image();
    file.src = document.formname.imgFile.value;
  }
  alert("file size=" + file.size);

結果は△でした。

type='file'のvalueプロパティには、セキュリティ上の理由により制約が設けられていて

「document.formname.imgFile.value」で取れるパスは

こんな風に途中がダミーになってしまいます。

該当のサイトを信用済みサイトに登録すれば、本物のパスを取得できるようになりますが

お客さんにそんなこと言えないので実質×ですね。。。＞＜

この後、画面にimgタグを置くパターンも試してみましたが、同じ結果になってしまいました。

リンク先のページをIE8で開いた場合は、取得できるのに何で！？

今回は、時間の都合でphp側でチェックするように切り替えちゃいますが

また追って調査したいと思います。