Q&A
１つの投稿に質問は１個ずつにするようにしましょう。
Ajaxを今から勉強する者です。
現在、サイトのフォームから画像をサーバーにアップロードする作業をphpで行っています。
【html】 <form name="sample_form" action="" method="post" enctype="multipart/form-data"> <input type="text" name="content"> <input type="file" accept=".jpg,.gif,.png,image/gif,image/jpeg,image/png" name="sample_image"> <input type="submit" name="sample_submit" value="送信"> </form>
現在は、以下の流れになっています。
1:上のフォームをPOST
2:phpでPOSTの内容をチェック
※例えば「データベースに既に同じ内容のcontentがある」or「ログインしていない」とき、DBへの保存を中止するなど、様々なチェック処理を行う
3:2のチェック作業で問題がなければ、phpで文章をDBに保存し、input type="file"の画像をサーバーの特定のフォルダに保存して、完了。
今までは上記の処理で事足りたのですが、最近、画像をアップロードする前にリサイズしたいと感じるようになりました。
調べたところ、jsでクライアント側で画像をリサイズし、submitのタイミングでリサイズしたデータをAjaxでサーバーに保存するとのことでした。
そこで、疑問なのですが、
１．現在、私はjsのコードはすべて「js-matome.js」というファイルにまとめていて、htmlの<head>内で読み込んでいます。（＝誰でも中身を見れる）
もし、Ajaxのコードを書く場合、私でいうところの「js-matome.js」に書くのが普通なのでしょうか？もしくは、phpの専用のファイルを作成して、そこに書くものなのでしょうか？
２．現在は、「phpでPOSTの内容をチェックして、内容に問題なければphpで画像を保存」という形ですが、
「phpでPOSTの内容をチェックして、内容に問題なければAjaxでリサイズした画像を特定のフォルダに保存」ということは可能なのでしょうか？
あるいは、phpの条件分岐の結果に応じてAjaxを実行するのは無理で、Ajaxで画像をリサイズして保存を実現するためには、POSTの内容のチェックの部分もAjaxに統一する必要があるのでしょうか。
※Ajaxに触れるのが初めてで、本当に質問内容が稚拙でお恥ずかしい限りです。。
何卒、道しるべを頂けましたら幸いです。
回答2件
0
ベストアンサー
リサイズ前のチェックの為のPOSTもajaxで行ってその結果を以てリサイズなりアップロードなりの次の処理に進めば良いと思いますが、そもそもクライアントでリサイズにこだわった結果のajax利用ですか？結局サーバーでリサイズしてるのでajaxにする分だけ無駄だと思うのですが
チェック通ったら普通にリサイズ処理通せばよくないですか？
コメント受けての追記
正確に言うとリクエスト１回で済むところをリクエスト３回投げるのでむしろ負荷上がってます。
容量の大きい画像の送受信でネットワーク帯域やサーバーのメモリ利用率が増える事が嫌なのなら、
縦横サイズ（https://lab.syncer.jp/Web/JavaScript/Snippet/35/）とかファイル容量（https://zatsuzen.com/javascript/filesize/）を先にjavascriptで判定して、許容範囲内であればリクエスト飛ばさせるようにするとかですね。
でも所詮javascriptなので、本気でいたずらする気のある人だったらjavascriptでの制御されようが関係ないので、javascriptでの制御は無意味です。
結局普通に画像と一緒にリクエスト受け付けて、チェックに引っかからなければそのままリサイズして処理を通すのが最適だと思う。負荷を減らすのが目的なら前述のjavascriptと併用するのが一般的か。
投稿2019/07/24 19:13
編集2019/07/24 21:24
総合スコア6415
「サーバー側で画像のリサイズを行わないでJavaScriptでリサイズしてから画像を送信する機能」というのを記事（https://qiita.com/horikeso/items/c98e4607eb9a633fc806）で読み、
私は、以下のように考えていました。
「方法A：大きいサイズの画像(例：20MB)をサーバーでリサイズ→サーバーに保存＝20MB分の負荷がサーバーにかかる」
「方法B：JavaScriptでサイズを小さく(300KBくらい)してから、Ajaxで保存＝300KB分の負荷しかサーバーにはかかわない」
上記の考えの結果、今回の質問に至ったのですが、方法Aも方法Bもサーバーへの負荷が同じなら、おっしゃる通りAjaxにする分だけ無駄になりそうです。涙が出そうです。
回答に追記しました。そんだけ考えてるところを考慮すると、とりあえずどの方法でも良いから実装して、そこから改造してった方が腑に落ちそうですね。
有難うございます。経験不足を痛感しております。精進します<(_ _)>
0
1)について
案件やプロジェクトによって異なる。一人でやっているなら自分でわかりやすいように管理して良い。
今時はwebpackとかでまとめるのが主流だがそれをやるには時期早々なのでやはり好きに管理すればいいと思う
2)について
AjaxとPHPの関係は友達との交換日記、手紙のやりとりみたいなものだと考えてください。
相手が、何か書いている（作業している）時に、横やりを入れる事はできません。
今回の場合であれば、
Ajax -> 画像送るよ -> php
php -> いい画像だね保存したよ -> ajax
のケースと
Ajax -> 画像送るよ -> php
php -> この画像は大きすぎるよ -> ajax
ajax -> 小さくして送り直すね -> php
php -> 今度はOKだよ -> ajax
みたいなケースのようなやりとりを考えてもらうと整理しやすいかと思います。
で、本題ですがPHPでもリサイズできるので、PHP側でリサイズすればajaxする事はないし
（js側でやってもajax使わないでできるんだけど）
必ずjsでリサイズしてから送れば1回のajaxリクエストで済むので分岐がどうこう考える必要はないのではないでしょうか。
投稿2019/07/24 19:20
総合スコア5036
わかりやすい説明、目がうるんでいます。。ありがとうございます<(_ _)>
私のイメージをお伝えするにあたり、あえて極端な画像サイズにしますが、
「20MBの画像データをPOSTして、自身のサーバー上でリサイズすると、自身のサーバーに20MB分の負荷がかかり、サイトが重くなるのでは？」
「なら、ブラウザ上で20MBの画像を横幅と縦幅それぞれ最大500pxにリサイズしてデータサイズを小さくしてからPOSTすれば、サーバーにかかる負荷は減るのでは？」
「サイトを調べたところ、JavaScriptで画像サイズを小さくしてからAjaxで保存する方法があるみたいだぞ。これなら、サーバーへの負荷が減らせるのでは？」
という思考だったのですが、もしかしたら私は恐ろしい勘違いをしていて、phpで画像をリサイズ→保存も、Ajaxでリサイズ→保存も、自身のサーバーにかかる負荷は同じなのでしょうか。。
もしそうなら、Ajaxにする理由は確かになくなります（；；）
あなたの回答
tips
プレビュー
