jQueryで、submit時にサイズの大きい<input type="file">のデータを初期化する方法

Question

jQueryで、submit時にサイズの大きい<input type="file">のデータを初期化する方法がどうしてもわかりません。

以下のようなデータを３つ送れるフォームがあるとします。

<form name="form" action="" method="post" enctype="multipart/form-data">
	<input type="file" name="image1">
	<input type="file" name="image2">
	<input type="file" name="image3">
	<input type="submit" value="送信">
</form>

以下のjQueryで「サイズが10M以上のデータが選択されたらデータを初期化」には成功しました。

$(function() {
	$("*[name=image1],*[name=image2],*[name=image3]").on('change', function() {
		var imgSize = this.files[0].size; //ここでファイルサイズを取得
			if ( imgSize > (10*1024*1024) ) { //10Mを超えていた場合の処理
				$(this).val(''); //選択したデータを初期化
			}
	});
});

しかし、「submitが押されたら、現在選択されているデータのうち、サイズが10M以上の画像データを初期化」する方法が、全くわかりません。

jQueryの基礎が学べるサイトも見てみたのですが、頭がこんがらがってしまいました。。

おわかりになる方がいらっしゃいましたら、どうかご教授頂けましたら幸いです。

何卒、宜しくお願い致します。

Answer 1

<script>
$(function(){
  $("form").on('submit', function(e) {
    $(this).find(':file').filter(function(){
      return ($(this).get(0).files[0]||{size:0}).size>1024*1024*10;
    }).val("");
  });
});
</script>

<form name="form" method="post" enctype="multipart/form-data">
<input type="file" name="image1"><br>
<input type="file" name="image2"><br>
<input type="file" name="image3"><br>
<input type="submit" value="送信">
</form>

Comments

[yayak]

理想通りの動作を実現できました！
本当に、全然知らないコードの書き方で、自身の勉強不足を痛感しています。
頂いた情報をもとに、もっと体系的に勉強できるように精進します。
重ねて、本当に有難うございます。救われました<(_ _)>

Answer 2

ループさせるか一個一個name指定でチェックですかね。submitでしたらreturn falseなりpreventDefaultはいれておく必要がありますね。

ただ、
submitがおされたら、だとサーバーに送信されている状態でもありますし、今回対応しようとしている「初期化」は単なる「選択解除」でしかないので、バリデーションの類いなのでしたらJavaScriptのようなクライアントサイドてはなくサーバーサイドでのチェックをすべきと思います。
※そもそもサーバー側の設定でpost総量のの最大サイズを指定できますし10Mって相当でかいです

Comments

[yayak]

mts様、いつも助力をくださり、心より御礼申し上げます。
phpにて、if( $_SERVER['CONTENT_LENGTH'] > (10*1024*1024) ){//処理}
という具合に、バリテーションをしているのですが、クライアントサイドでもできるようになりたくて勉強していたのですが、煮詰まってしまい、涙目でこのサイト様にお世話になることになりました。。
また、確かに10Mって相当大きいなと指摘されて思い、もっと小さくしようと思います。
本当に、いつも有難うございます。