###前提・実現したいこと
PHP(CakePHP)で写真をアップロードできるシステムを作っています。
「選択」をクリックして画像選択時に、300KB以上の画像がアップロードされた場合は、アラートを表示して選択ができないようにしたいです。
選択できる画像は15枚です。
15枚選択して、submitした時に、たった1枚の画像容量オーバーによって全ての選択がクリアされてしまう。という状態は絶対に避けたいです。
希望する動作に近いものは書けたのですが、1度だけしか実行されず、2度目の選択からは300KB以上のファイルも選択できるようになってしまいます。
何度選択しても、300KBの画像アップロードを判別するfunctionを作るにはどうしたらよいでしょうか?
###該当のソースコード
window.onload = function(){ $("#filupload").addEventListener('change', afile_changeHandler); } function afile_changeHandler(evt){ var files = evt.target.files; var s = ""; for(var i = 0; i < files.length; i++){ var f = files[i]; s += 'name;' + escape(f.name) + '<br>' + 'size;' + f.size + ' Bytes<br>' + 'type;' + f.type + '<br>' + 'date;' + f.lastModifiedDate + '<hr>'; } if (f.size > 300000) { alert("容量が大きすぎます"); var file = document.getElementById("filupload"); file.parentNode.innerHTML = file.parentNode.innerHTML; document.getElementById("file_value").value=""; } $('#info').innerHTML = s; } echo '<input type="file" id="filupload" accept="image/png,image/gif,image/jpeg" multiple="multiple" onchange="select_file(this);" >'; echo $this->Form->input("file_value_",array('id'=>"file_value_.$i.", 'label'=>false, 'div'=>false, 'size'=>'25', 'disabled'=>'disabled', 'style'=>'width: 100%; border: none;'));
###試したこと
submitしてControllerで処理をしようとしたのですが、選択した画像のパスが消えてしまい、再度選択しなおさなければならなかったので、javascriptかjqueryで処理することにしました。
###補足情報(言語/FW/ツール等のバージョンなど)