Q&A
ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。また、Ajaxで送られてくるデータがHTMLなのか配列データなのかを追記してください。「疑問点」についてはPHPのコードを提示してください。「Form::select～」だけではわかりません。
やりたいこと
ajaxのsuccess時現在
画像プレビュー・テキストエリア・削除ボタンを作成し、表示しています。
ここの処理に
selectboxのプルダウンを作成したいです。
ajaxにてselectboxを作るというのはわからなかったので質問させていただきました。
疑問点
現在phpの変数にてoptionを$channel_list持っているのですが
ajaxで作成するにあたり$channel_listの中身を使うことは可能でしょうか？
現在のコード
js
1success: function(imageData, status, xhr) { 2 var res = {}; 3 try { 4 res = $.parseJSON(xhr.responseText); 5 }catch (e) {} 6 $("#image-files ul").append("<img class='imgView' src=\"" + res.img + "\" data-imgid=\"" + res.img_id + "\"/ >"); 7 8 $('<input>').attr({ 9 type: 'textarea', 10 name: "body["+res.img_id+"]", 11 value: "", 12 size: 30, 13 maxlength: 140, 14 "data-imgid": res.img_id 15 }).appendTo("#image-files div"); 16 $('<input>').attr({ 17 "class" : "deleteBtn", 18 type: "button", 19 name: res.img_id, 20 value: "削除", 21 "data-imgid": res.img_id 22 }).appendTo("#image-files div"); 23} 24
追記
js
1 $(".uploadFile").change(function() { 2 // ファイル分タスクを作成 3 $.each(this.files, function(i, file){ 4 promise = promise.pipe(function(response){ 5 6 var newPromise = $.Deferred(); 7 var formData = new FormData(); 8 9 formData.enctype = "multipart/form-data"; 10 formData.append("file", file); 11 $("#progress-container").append(progressTemplate); 12 $.ajax({ 13 url: "/hogehoge/add", 14 type: 'POST', 15 dataType: 'text', 16 data: formData, 17 cache: false, 18 contentType: false, 19 processData: false, 20 xhr: function() { 21 var xhr = $.ajaxSettings.xhr(); 22 if (xhr.upload) { 23 $('#submitBtn').attr('disabled', 'disabled'); 24 xhr.upload.addEventListener('progress', function(evt) { 25 var percent = (evt.loaded / evt.total) * 100; 26 $("#progress-container").find(".progress-bar").width(percent + "%"); 27 28 }, false); 29 } 30 return xhr; 31 }, 32 success: function(imageData, status, xhr) { 33 var res = {}; 34 try { 35 res = $.parseJSON(xhr.responseText); 36 }catch (e) {} 37 $("#image-files ul").append("<img class='imgView' src=\"" + res.img + "\" data-imgid=\"" + res.img_id + "\"/ >"); 38 $('<input>').attr({ 39 type: 'textarea', 40 name: "body["+res.img_id+"]", 41 value: "", 42 size: 30, 43 maxlength: 140, 44 "data-imgid": res.img_id 45 }).appendTo("#image-files div"); 46 $('<input>').attr({ 47 "class" : "deleteBtn", 48 type: "button", 49 name: res.img_id, 50 value: "削除", 51 "data-imgid": res.img_id 52 }).appendTo("#image-files div"); 53 $('#submitBtn').removeAttr('disabled'); 54 if ($("#image-files ul img").length > 10){ 55 $('#submitBtn').prop('disabled', true); 56 } 57 }, 58 error: function(xhr, textStatus, errorThrown) { 59 var res = {}; 60 try { 61 res = $.parseJSON(xhr.responseText); 62 } catch (e) {} 63 alert(res.errorMessage); 64 $('#submitBtn').attr('disabled', 'disabled'); 65 }, 66 complete: function() { 67 $("#progress-container").children().remove(); 68 newPromise.resolve(); 69 } 70 }); 71 return newPromise; 72 }); 73 }); 74 def.resolve(); 75 });
php
1コントーローラー 2 3 4if (isset($_FILES['file']['error']) && is_int($_FILES['file']['error'])) { 5 try 6 { 7 8 switch ($_FILES['file']['error']) { 9 case UPLOAD_ERR_OK: 10 break; 11 case UPLOAD_ERR_NO_FILE: 12 throw new RuntimeException('ファイルが選択されていません'); 13 case UPLOAD_ERR_INI_SIZE: 14 case UPLOAD_ERR_FORM_SIZE: 15 throw new RuntimeException('ファイルサイズが大きすぎます'); 16 default: 17 throw new RuntimeException('その他のエラーが発生しました'); 18 } 19 20 // MIMEタイプチェック 21 $mimeTypeCode = @exif_imagetype($_FILES['file']['tmp_name']); 22 if (!in_array($mimeTypeCode, array(IMAGETYPE_GIF, IMAGETYPE_JPEG, IMAGETYPE_PNG), true)) { 23 throw new RuntimeException('画像でないファイル、又は未対応の画像形式です'); 24 } 25 26 27 // 作成したサムネイルデータを取得してbase64エンコード 28 $imageFile = @base64_encode(@file_get_contents($_FILES['file']['tmp_name'])); 29 $mimeTypeStr = @image_type_to_mime_type($mimeTypeCode); 30 31 if ($imageFile && $mimeTypeStr) { 32 33 // 画像を出力 34 $json = array(); 35 $json['img'] = "data:" . $mimeTypeStr . ";base64," . $imageFile; 36 $json['img_id'] = $piy_post->img_id; 37 38 // 画像を出力 39 echo json_encode($json,JSON_UNESCAPED_UNICODE); 40 } 41 } else { 42 // 作成したサムネイルが見つからない、MIMEタイプが取れていない際のエラー 43 throw new RuntimeException('画像表示前になんらかのエラーが発生しました'); 44 } 45 46 } 47 catch (RuntimeException $e) 48 { 49 50 // レスポンスにエラー情報をセットする 51 header('HTTP', true, 400); // bad requestを返すことにする 52 53 $json = array(); 54 $json['errorMessage'] = $e->getMessage(); 55 echo json_encode($json,JSON_UNESCAPED_UNICODE); 56 exit; 57 } 58 } 59 exit; 60 }
回答2件
0
プロパティの参照に失敗しているなら開発環境(F12)のコンソールに
エラーがでているとおもいます。
とりあえずはconsole.log(res)して
resがどういった構造でデータをもっているか確認することですね
投稿2017/08/31 03:35
総合スコア114779
0
ベストアンサー
ブラウザからサーバー側への通信があって、それぞれブラウザ側のプログラムとしてJavaScript、サーバー側のプログラムとしてPHPを使用しているので、こんがらないように切り分けることが必要です。
焦点はプルダウンcategoryの$channel_listのビュー表示方法。
■現在の仕様
- プルダウンのオプションタグリストはPHP側にある
- Ajax通信完了後にプルダウンを表示
- Ajax通信完了時のPHP側からの戻り値はJSON形式、画像パス、画像ID
Ajax通信の戻り値を返すPHPのアクションコントローラーは下記のようにします。
php
1// 画像を出力 2$json = array(); 3$json['img'] = "data:" . $mimeTypeStr . ";base64," . $imageFile; 4$json['img_id'] = $piy_post->img_id; 5 6// ↓ここ追加 7// プルダウンオプションタグ連想配列取得 8$channel_list = なんかクラス::getChannelList(); 9$json['category'] = \Form::select("category","",$channel_list); 10 11// 画像を出力 12echo json_encode($json,JSON_UNESCAPED_UNICODE);
続いて、JavaScriptは下記のように設定してdataTypeをjsonに設定しておきます。HTML構造がよくわかなかったので、append()の結果が違うかもしれません。違っていたら適宜変更してください。
js
1$.ajax({ 2 url: "/hogehoge/add", 3 type: 'POST', 4 dataType: 'json', //text → jsonに変更 5 data: formData, 6 cache: false, 7 contentType: false, 8 processData: false, 9 ... 10 success: function(res) { 11 var $img = $('<img class="imgView" src="'+ res.img +'" data-imgid="'+ res.img_id +'" />'); 12 var $txtArea = $('<textarea name="body['+ res.img_id +']" size="30" maxlength="140" data-imgid="'+ res.img_id +'">'+"\n"+'</textarea>'); 13 var $delBtn = $('<input type="button" name="'+ res.img_id +'" value="削除" class="deleteBtn" data-imgid="'+ res.img_id +'"'); 14 15 // 画像・プルダウン追加 16 $('#image-files ul') 17 .append($img) 18 .append(res.category); 19 20 // テキストエリア・削除ボタン追加 21 $('#image-files div') 22 .append($txtArea) 23 .append($delBtn); 24 25 $('#submitBtn').removeAttr('disabled'); 26 27 if ($("#image-files ul img").length > 10){ 28 $('#submitBtn').prop('disabled', true); 29 } 30 }, 31...
投稿2017/08/31 07:45
編集2017/08/31 09:39
総合スコア1652
回答ありがとうございます！
すごく程に書いていただいたのですが
いくつか不明点がございます
・JSONのコードはどこに記載するのか？
・PHPのget_ajax()はいつどこで宣言してトリガーさせるのか？
が不明で理解ができていません。
現在 ファイルを選択すると
ajaxが動き
その時に画像ファイルのidを取得して
成功時に
画像プレビュー
テキストフォーム
削除ボタン
を表示しているという流れの現状を
作成するというよりは
画像パス：
画像ID：
プルダウンオプション情報：
にデータを挿入し
表示させる？
ということをしようとしているのでしょうか？
＞・JSONのコードはどこに記載するのか？
JSONのコードはどこかにコードを記載するものではなく、PHP側からクライアント側にAjaxリクエストの戻り値として送信する「JSONデーターのフォーマット仕様」の意味で記載しました。
＞PHPのget_ajax()はいつどこで宣言してトリガーさせるのか？
PHP側はフレームワークなどを使用していないのであれば、単純に下記のように記載します。記載ファイルはAjaxのPOST？GET？先のPHPファイルです。
$resp = array('img' => '画像パス', 'img_id' => '画像ID', 'category' => \Form::select("category","",$channel_list));
echo json_encode($resp);
プログラムの流れは同じはずですが、違ってしまっているのでしょうか？
Ajaxは裏側でPHPに通信しに行って、何か返ってきたら「success: function(){...}」で処理をするということです。この通信しに行っているリクエスト先のPHPが起点となってJSONデータを生成しているはずです。
画像IDはコードがないので不明ですが多分POSTでPHPにデーターを渡して、PHP側ではパススルーして「success: function()」に戻ってきているだけだと思います。
追記させていただきました
error:時に
エラー種別を引きだし
表示させるという処理は
回答いただいたように改修しても使うことは可能でしょうか？
下記のように互換性があります。各オブジェクトキーは、メソッドとしてバラバラに書くことができるようになりました。古いjQueryは除きます。
$.ajax().done() == $.ajax({success: function(){}})
$.ajax().fail() == $.ajax({error: function(){}})
$.ajax().always() == $.ajax({complete: function(){}})
回答参考したのですがプログレスバーなども途中で止まってしまうようになってしましました。
success部分ののみの回収になると思っていたので
全コードを表記しておらずすみません。。
ありがとうございます
ためしてみたのですが
alert(res.category);で
プルダウンの表示はできるのですが
プログレスバーが消えないのと画像などの表示がうまくいきません
シンタックスエラーでした！
category
にも
data-imgid= res.img_id
を振りたいのですが
可能でしょうか？
PHPのソースコードに下記を追加すればOKだと思います。
$json['category'] = \Form::select("category", "", $channel_list, array('data-imgid' => $piy_post->img_id));
ありがとうございました！無事できました
あなたの回答
tips
プレビュー
