環境【cakePHP2.5, PHP5.5】
ファイルアップロードの進捗状況を取得してプログレスバーを表示したいのですが、うまくいかず困っております。
現状の方式は以下です(関連部分だけ抜粋)
●cakePHPのViewファイル(アップロードForm)
<?php echo $this->Form->create('Model', array('type' => 'file')); ?> //Form作成
<?php echo $this->Form->hidden(ini_get('session.upload_progress.name'), array('value' => 'example')); ?> //PHPのアップロード状況取得設定
<?php echo $this->Form->file('upload_file'); ?> //ファイル選択
<?php echo $this->Form->submit('アップロード', array('div' => false, 'escape' => false));//submit
●Viewファイル内のjavascript(submitイベントを取得してajax通信)
$(function() {
$('#FormName').submit( function(event) {
$.ajax({
url:'/controller/action',
success:function (data, textStatus) {
$('#progress').html(data);
},
error:function (err) {
console.log('ajax通信失敗:'+err);
},
});
});
});
●cakePHPのアクション
※アップロード処理は省略
public function action() {
if ($this->request->is('ajax')) {
//$_SESSIONキーから進捗状況を取得
$key = ini_get("session.upload_progress.prefix").'example';
$data = $_SESSION[$key];
//パーセンテージ計算
$progressData = round(($data["bytes_processed"]/$data["content_length"])*100);
//結果表示用の変数に値を入れ、更新用のViewをrender
$this->set(compact('progressData'));
$this->render('/Elements/ajax/progress','ajax');
}
}
renderしているエレメントはアップロードViewファイルの中で指定しています。
大きく問題は2つあります。
1 ajax通信が動かない
cakePHPのアクションはキックしていますが(ログを吐かせて確認)、errorが返ってきます(errの中身は[ object Object ])。
ただし、submitイベント内ではなく、たとえば<input type=button>のonClickイベント関数の中に入れてやると正常に通信できます。
また、他にも数カ所ajax通信を行っている箇所がありますが、そちらは特に問題なく通信できています
なお、ajax通信部分をsetIntervalや関数に入れてSetTimeoutの中に含めると、アクションをキックすらできず何も動かない感じになります(なぜ…)
submitとajax通信は同時には出来ないものなのでしょうか?
2 ajax通信から$_SESSIONのupload_progress関連の値が取れない
ファイルアップロード中にcakePHPのアクションに普通にアクセス(GET)すると、アップロード状況が取得できるのですが、ajaxからこのアクションにアクセスすると値が取れない($_SESSION内にこのキーと値が存在しない)状態になります。
1の問題と絡んでいるような気もしますが、なぜajax通信のときだけ取得できないのか、原因が分からず困っております。
cakePHPでファイルアップロードの進捗を表示する機能をつくられている方など、なにかヒントを頂ければと思います。
なにとぞよろしくお願いします。
No.1ベストアンサー
- 回答日時:
■submitでAjaxがアウト
そもそも、非同期通信であるAjaxと、同期通信であるフォーム送信を一度に行ってもマトモに動く訳がない。
$(function() {
$('#FormName').submit( function(event) {
event.preventDefault(); // submitイベント止める。<a>リンクのクリックイベントでも同じ。
$.ajax({
url:'/controller/action',
success:function (data, textStatus) {
$('#progress').html(data);
},
error:function (err) {
console.log('ajax通信失敗:'+err);
},
});
});
});
■ファイルアップロード進捗
jsのTimerイベント? そんな物を使うと非同期コールバックなど一切戻らない。
jQuery使ってファイルアップロードやるなら、クライアントサイドは同じなので。以下の記事がズバリ。
プログレスバー表示は適当なものを。
ttp://takuya-1st.hatenablog.jp/entry/20121101/1351754417
ありがとうございます。
ご紹介の方法にて一応できました。jsからアップロードしないと進捗率は取得できないんですね。
でも同期通信と非同期通信は同時には出来ないとなると、PHPの5.4から有効になった session.upload_progressの値はどうやって利用すればいいんですかね。別ウィンドウの別リクエストとして取得するしかないのでしょうか。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- CGI htmlからパラメータで、cgiに渡したい。 1 2023/02/06 16:15
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- PHP PHPで画像の渡しが上手く行きません。 1 2023/02/02 09:39
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- PHP PHPでCookieを使った訪問回数について 1 2023/05/28 14:10
- PHP PHPでユーザー情報を入力して簡易ログイン機能をつくってみたのですが 1 2023/05/29 08:51
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
バッチファイル 特定ウインドウ...
-
自作の地図をグーグルマップの...
-
PDFを(htmlのように)無限に縦...
-
GASでスプレッドシートの一番上...
-
php の画面ボダンを押すと、サ...
-
以下のURL入れますか?皆さんは↓
-
RPA(PowerAutomate)の実装について
-
同一ページ移動時ハンバーガー...
-
MMS機能とは
-
正規表現で、特定の文字列を含...
-
時間表示で0:48:17と入力すると...
-
latex文書でのURLの表示
-
グーグルディスカバー ログイン...
-
1枚の画像をクリックすると複数...
-
携帯電話番号だけで、居場所が...
-
画像のドットの部分が抜けてい...
-
webページの特定の部分だけ消し...
-
jQueryを使いformでsubmitした...
-
C言語のflagの使い方が分かりま...
-
どんな職業につきたいのがわか...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
cakePHP+Ajax アップロード状...
-
ajax後、php,mysqlも一部再読み...
-
URLの中に&があると&に変...
-
Ajaxでsessionにいれた値が引き...
-
【JavaScript】confirmのボタン...
-
DirectXとOpenGLはどちらが動作...
-
非同期通信を使うタイミングが...
-
HTMLでDBからデータを表形式で...
-
リンクを押すとEXEファイルを実...
-
saved from url=(0013)abou
-
ASP.NET(VB)VBソースからJavas...
-
Javadcriptでwebサーバー側にあ...
-
カーソルの動きに合わせてDBか...
-
Ajaxでpostした内容のresponse...
-
jQueryのAjaxで通信の途中結果...
-
[JavaScript] preven...
-
php ob_flushが全く動作しない
-
webシステムでchrome
-
sleepの負荷
-
JQuery サーバー上にアップする...
おすすめ情報