画面をブロックしたいと思っています。

質問

PHPで複数の画像をアップロードするページを作成しています。
アップロードする際に「image magick」を使用して変換処理を行っています。
画像の変換中に画面をブロックしたいと思い、ネットで調べていたらjqueryのblockUIを知りました...
ただ私が記述したプログラムではどのように実装したらいいのかが解らず、投稿させていただきました。

私が記述したプログラムはPOSTする際にボタン名をPOSTして処理を分ています。
下記のように感じで記述しています。

switch($_SERVER['REQUEST_METHOD']){
　case 'POST':
　　switch($aryPOST['BTN']){
　　　case "確認":

　　　　・

　　　<省略>

　　　　・

　　　　※この中でforeachでアップロードのファイル分、繰り返して画像変換処理を行っています。
　　　　　入力エラーや処理中にエラーが発生した場合は入力ページを出力していますが、正常に処理を実行した場合は確認ページを出力しています。

　　　　・

　　　<省略>

　　　　・
　　　　break;

　　　case "完了":

　　　　break;

　　　default:
　　}
　default:
}

説明が下手で皆さんに伝えられたか心配ですが理解していただけましたでしょうか。
簡単にいうと画像の変換中に画面をブロックしたいと思っています。

上記のソースにjqueryのblockUIをどのように記述したら実装できるのでしょうか。
申し訳ありませんがご教授いただけませんでしょうか。
どうか、皆さんのお知恵をお貸しいただけませんでしょうか。
宜しくお願いします。

回答No.2

LancerVII · ベストアンサー

こんにちは。

一応、サンプルを作ってみましたが、いまの作りにそのまま使えるかはわかりません。

あくまで参考例として見てください。

http://hppg.moe.hm/okwave/qa/q8209142/

No.1で回答した通りの動きで作ってあります。
(アップロード後のファイル名は固定で、排他処理等も考えてないので、同時アクセス時の動作で不具合があるかもしれません。ご了承ください。)
また画像処理は特に行っていなく、sleepによりレスポンスを遅らせて、ブロック中の表示がわかるようにしてあります。

お礼

連絡が遅くなってすみません。
それにサンプルを作成して説明いただきありがとうございます。
私が作成したプログラムに使えるかわかりませんが参考にさせていただきます。
ありがとうございました。

回答No.1

LancerVII

こんにちは。

>上記のソースにjqueryのblockUIをどのように記述したら実装できるのでしょうか。

jQueryのblockUIはわかっているとは思いますが画面のブロックですのでPHPのソースは直接関係がありません。

アップロード処理にAjaxを利用して非同期で実行し、完了というレスポンスがくるまでブロックを表示するという処理になります。

なので画面上のアップロード部分の改修と、PHP側のレスポンスの部分を改修する必要があると思います。

・Ajaxにてファイルをアップロード
・画面にブロックを表示
・（サーバ上で画像の変換処理を実施)
・（サーバ上から完了のレスポンス)
・確認画面へ遷移

流れはこんな感じになると思います

お礼

連絡が遅くなってすみません。
なるほど。
流れを説明していただきありがとうございます。
1つずつ進めていきたいと思います。