JavaScriptで<input type="file">で選択されたファイルサイズを取得する〜IE編〜
先日作った、画像ファイルが選択されたら、ファイルアップロードを行う処理↓↓
struts+jQuery Form Pluginを使ったファイルアップロード① - わたしの日記だよ
ですが、JavaScriptでファイルサイズをチェックする処理を入れていたものの
IE8だとチェックが効かないよ!と言われてしまいました。
1.現在の実装
今の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(シンクイット)
2.回避策・・・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側でチェックするように切り替えちゃいますが
また追って調査したいと思います。