input type="file"にアップロードされたファイルのサイズを取得したい

Question

現在<input type="file">ファイルアップロードが５つあるのですが
その５つのファイルの合計サイズが１GBを超えるとjspに文字を表示したいのですが
できずに困っています。
説明下手ですみませんが、ご教授お願いします。

Comments

[yambejp]

送る前にチェックしたいのでしょうか？送った後にサーバーがでチェックするのでしょうか？

[退会済みユーザー]

サーバー側でやるにしても　APサーバーのバージョン、フレームワークの有無がわからんと回答にはならんとおもうじょ

[ThsRyu]

送る前にチェックをしたいです。フレームワークはLiferayというもので、JavaScriptはAlloyuiです。

Answer 1

送る前のチェック

ということなので、以下でどうでしょうか？

document.addEventListener('submit',function(e){
  var size=0;
  var fd=new FormData(e.target);
  size+=fd.get("f1").size|0;
  size+=fd.get("f2").size|0;
  size+=fd.get("f3").size|0;
  /*必要に応じて配列などで調整してもOK*/
  console.log(size);
  /*sizeをチェックして、必要に応じてsubmitを止める*/
  e.preventDefault();
});

<form id="form1">
<input type="file" name="f1"><br>
<input type="file" name="f2"><br>
<input type="file" name="f3"><br>
<input type="text" name="t1"><br>
<input type="submit" value="go">
</form>

追記

input要素が変わる度にファイルサイズを表示

document.addEventListener('change',function(e){
  var t=e.target;
  if(t.form.id=="form1"){
    var size=0;
    var fd=new FormData(t.form);
    size+=fd.get("f1").size|0;
    size+=fd.get("f2").size|0;
    size+=fd.get("f3").size|0;
    console.log(size);
  }
});

Comments

[ThsRyu]

ご回答ありがとうございます。
実装したのですができませんでした。。。
サーバーでチェックする場合のコードはどのような感じになるのでしょうか？
度々すみません

[yambejp]

> 実装したのですができませんでした。。。

できないとは？エラーなのか、なにも動かないのか？どういう状態でしょうか？
サーバーサイドのチェックはあいにくjspをチェックする環境がないので
申し訳ありませんが正確な回答ができません。あしからず。
ただしファイル自体がおくられてきているのですから
単純にファイルの容量をたすだけでは？

[ThsRyu]

コンソールに表示しませんでした。
なるほど、やっぱりクライアント側がいいんですかね
ボタンを押さずにsizeの表示は難しいですか？

[yambejp]

> ボタンを押さずにsizeの表示は難しいですか？
送るときにチェックしたいのではないのですか？
ファイルを選択するたびということですか？追記します