Q&A
下記のコードは、画像フォームで選択した時に、バイト数が大きい画像の場合は、送信できないようにしています。やり方としては、送信ボタンにstyle="display: none"をつけて、それを画像選択時のサイズの取得により、隠したり、表したりしています。ただ問題がありまして、GoogleChrome F12キーより、コードを確認し、style="display: none"を消してしまえば、送信ボタンが表示され、その時に、大きなサイズのファイルでも送信できてしまいます。解決策として思いつくことは、やはり、送信先でのPHP側で処理しか思い浮かばず、できるだけファイル遷移しないで、完結したいと思いますが可能なのでしょうか?
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>TEST</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <form action="data.php" method="post" enctype="multipart/form-data"> <input type="file" id="file" name="img" accept="image/*"> <input type="submit" name="send" value="送信" style="display: none";><div id="alert"></div> </form> <script type="text/javascript"> $(function () { $('input[type=file]').bind('change', function() { var size = this.files[0].size; $('input[type=submit]').hide(); if(1048576 < size){ $('#alert').html('イメージサイズが多きすぎです (' + size + 'バイト)' ); }else{ $('input[type=submit]').show(); $('#alert').html(''); } } ); }); </script> </body> </html>
回答2件
0
一応submitイベントを取得して、イベントのpreventdefault()を利用してsubmitイベントをキャンセルして確認してから送信するという手が存在しますが、javascriptを無効化されてしまえばそれも意味がなくなります。
最終的にjavascriptだけでは解決できないことになるのでphpでも同様の処理が必要になると思われます。
投稿2017/07/01 14:05
総合スコア2158
0
javascriptのバリデートは制限ではなくユーザー補助です
クライアント側でバリデートを実装したからといって
正しいデータが送られてくるという信頼はありません。
あくまでもサーバー側に送られたデータが不正だったときの
再入力を避けさせるための予防策でしかないと理解下さい。
したがって、javascriptによるバリデートは最低限に抑え
受け側のサーバーでバリデートやサニタイズを強めにかける必要があります
ファイルサイズについてはPHPなどプログラム側でかける制限の他に
httpdがもつ基本機能でも対応できます。
投稿2017/07/03 01:20
総合スコア114775
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。