質問: Ajaxを今から勉強する者です。 現在、サイトのフォームから画像をサーバーにアップロードする作業をphpで行っています。 ``` 【html】 ``` 現在は、以下の流れになっています。 1:上のフォームをPOST 2:phpでPOSTの内容をチェック ※例えば「データベースに既に同じ内容のcontentがある」or「ログインしていない」とき、DBへの保存を中止するなど、様々なチェック処理を行う 3:2のチェック作業で問題がなければ、phpで文章をDBに保存し、input type="file"の画像をサーバーの特定のフォルダに保存して、完了。 今までは上記の処理で事足りたのですが、最近、画像をアップロードする前にリサイズしたいと感じるようになりました。 調べたところ、jsでクライアント側で画像をリサイズし、submitのタイミングでリサイズしたデータをAjaxでサーバーに保存するとのことでした。 そこで、疑問なのですが、 1.現在、私はjsのコードはすべて「js-matome.js」というファイルにまとめていて、htmlの内で読み込んでいます。(=誰でも中身を見れる) もし、Ajaxのコードを書く場合、私でいうところの「js-matome.js」に書くのが普通なのでしょうか?もしくは、phpの専用のファイルを作成して、そこに書くものなのでしょうか? 2.現在は、「phpでPOSTの内容をチェックして、内容に問題なければphpで画像を保存」という形ですが、 「phpでPOSTの内容をチェックして、内容に問題なければAjaxでリサイズした画像を特定のフォルダに保存」ということは可能なのでしょうか? あるいは、phpの条件分岐の結果に応じてAjaxを実行するのは無理で、Ajaxで画像をリサイズして保存を実現するためには、POSTの内容のチェックの部分もAjaxに統一する必要があるのでしょうか。 ※Ajaxに触れるのが初めてで、本当に質問内容が稚拙でお恥ずかしい限りです。。 何卒、道しるべを頂けましたら幸いです。
回答: リサイズ前のチェックの為のPOSTもajaxで行ってその結果を以てリサイズなりアップロードなりの次の処理に進めば良いと思いますが、そもそも**クライアントでリサイズ**にこだわった結果のajax利用ですか?結局サーバーでリサイズしてるのでajaxにする分だけ無駄だと思うのですが チェック通ったら普通にリサイズ処理通せばよくないですか? ##### コメント受けての追記 正確に言うとリクエスト1回で済むところをリクエスト3回投げるのでむしろ負荷上がってます。 容量の大きい画像の送受信でネットワーク帯域やサーバーのメモリ利用率が増える事が嫌なのなら、 縦横サイズ(https://lab.syncer.jp/Web/JavaScript/Snippet/35/)とかファイル容量(https://zatsuzen.com/javascript/filesize/)を先にjavascriptで判定して、許容範囲内であればリクエスト飛ばさせるようにするとかですね。 でも所詮javascriptなので、本気でいたずらする気のある人だったらjavascriptでの制御されようが関係ないので、javascriptでの制御は無意味です。 結局普通に画像と一緒にリクエスト受け付けて、チェックに引っかからなければそのままリサイズして処理を通すのが最適だと思う。負荷を減らすのが目的なら前述のjavascriptと併用するのが一般的か。