質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.12%

phpの条件分岐の結果に応じてAjaxを使用することは可能でしょうか

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 195

yayak

score 39

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でサーバーに保存するとのことでした。

そこで、疑問なのですが、

1.現在、私はjsのコードはすべて「js-matome.js」というファイルにまとめていて、htmlの<head>内で読み込んでいます。(=誰でも中身を見れる)
もし、Ajaxのコードを書く場合、私でいうところの「js-matome.js」に書くのが普通なのでしょうか?もしくは、phpの専用のファイルを作成して、そこに書くものなのでしょうか?

2.現在は、「phpでPOSTの内容をチェックして、内容に問題なければphpで画像を保存」という形ですが、
「phpでPOSTの内容をチェックして、内容に問題なければAjaxでリサイズした画像を特定のフォルダに保存」ということは可能なのでしょうか?
あるいは、phpの条件分岐の結果に応じてAjaxを実行するのは無理で、Ajaxで画像をリサイズして保存を実現するためには、POSTの内容のチェックの部分もAjaxに統一する必要があるのでしょうか。

※Ajaxに触れるのが初めてで、本当に質問内容が稚拙でお恥ずかしい限りです。。

何卒、道しるべを頂けましたら幸いです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mikkame

    2019/07/25 04:11

    1つの投稿に質問は1個ずつにするようにしましょう。

    キャンセル

  • yayak

    2019/07/25 04:26

    すみませんでした<(_ _)>
    今回はすでに両方の質問に回答をいただいてしまっているので、次回から気を付けます。
    申し訳ございませんでした。

    キャンセル

回答 2

checkベストアンサー

+3

リサイズ前のチェックの為のPOSTもajaxで行ってその結果を以てリサイズなりアップロードなりの次の処理に進めば良いと思いますが、そもそもクライアントでリサイズにこだわった結果のajax利用ですか?結局サーバーでリサイズしてるのでajaxにする分だけ無駄だと思うのですが
チェック通ったら普通にリサイズ処理通せばよくないですか?

コメント受けての追記

正確に言うとリクエスト1回で済むところをリクエスト3回投げるのでむしろ負荷上がってます。
容量の大きい画像の送受信でネットワーク帯域やサーバーのメモリ利用率が増える事が嫌なのなら、
縦横サイズ(https://lab.syncer.jp/Web/JavaScript/Snippet/35/)とかファイル容量(https://zatsuzen.com/javascript/filesize/)を先にjavascriptで判定して、許容範囲内であればリクエスト飛ばさせるようにするとかですね。
でも所詮javascriptなので、本気でいたずらする気のある人だったらjavascriptでの制御されようが関係ないので、javascriptでの制御は無意味です。
結局普通に画像と一緒にリクエスト受け付けて、チェックに引っかからなければそのままリサイズして処理を通すのが最適だと思う。負荷を減らすのが目的なら前述のjavascriptと併用するのが一般的か。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/07/25 04:51

    「サーバー側で画像のリサイズを行わないでJavaScriptでリサイズしてから画像を送信する機能」というのを記事(https://qiita.com/horikeso/items/c98e4607eb9a633fc806)で読み、
    私は、以下のように考えていました。
    「方法A:大きいサイズの画像(例:20MB)をサーバーでリサイズ→サーバーに保存=20MB分の負荷がサーバーにかかる」
    「方法B:JavaScriptでサイズを小さく(300KBくらい)してから、Ajaxで保存=300KB分の負荷しかサーバーにはかかわない」
    上記の考えの結果、今回の質問に至ったのですが、方法Aも方法Bもサーバーへの負荷が同じなら、おっしゃる通りAjaxにする分だけ無駄になりそうです。涙が出そうです。

    キャンセル

  • 2019/07/25 06:25

    回答に追記しました。そんだけ考えてるところを考慮すると、とりあえずどの方法でも良いから実装して、そこから改造してった方が腑に落ちそうですね。

    キャンセル

  • 2019/07/26 20:48

    有難うございます。経験不足を痛感しております。精進します<(_ _)>

    キャンセル

+2

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/25 04:35 編集

    わかりやすい説明、目がうるんでいます。。ありがとうございます<(_ _)>
    私のイメージをお伝えするにあたり、あえて極端な画像サイズにしますが、
    「20MBの画像データをPOSTして、自身のサーバー上でリサイズすると、自身のサーバーに20MB分の負荷がかかり、サイトが重くなるのでは?」
    「なら、ブラウザ上で20MBの画像を横幅と縦幅それぞれ最大500pxにリサイズしてデータサイズを小さくしてからPOSTすれば、サーバーにかかる負荷は減るのでは?」
    「サイトを調べたところ、JavaScriptで画像サイズを小さくしてからAjaxで保存する方法があるみたいだぞ。これなら、サーバーへの負荷が減らせるのでは?」
    という思考だったのですが、もしかしたら私は恐ろしい勘違いをしていて、phpで画像をリサイズ→保存も、Ajaxでリサイズ→保存も、自身のサーバーにかかる負荷は同じなのでしょうか。。
    もしそうなら、Ajaxにする理由は確かになくなります(;;)

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.12%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる