ユーザー間でメッセージや画像を送信できるトークルームのシステムを作っています。
```ここに言語を入力
var talk_time = $('#talk_time');
talktime= talk_time.val();
上記のように一つずつの値だと、phpに送って受け取ることも、jsファイル内のtemplateで表示することもできるのですが、FormDataを使用した時の受け取りとtemplateでの表示ができません。 ご教示いただけたらと思います。 ### ```html <form method="post" action="" id="myForm" name="myForm" enctype="multipart/form-data"> <div class="comment-area"> <textarea class="text-area" maxlength="400" name="comment" placeholder="返信コメントを記入してください…" ></textarea> <input type="hidden" name="prfimg" value="img"> <input type="hidden" name="uid" value="aaaa"> <input type="hidden" name="talknob" value="9999"> <input type="hidden" name="talktime" id="talk_time" value="2017-03-06"> <input type="hidden" name="uname" value="hhh"> <input type="hidden" name="buyer" value="123"> <input type="hidden" name="seller" value="456"> <p class="text-counter">400</p> <div class="comment-file"> <input type="file" name="add_file_01"> <input type="file" name="add_file_02"> <input type="file" name="add_file_03"> </div><!--comment-file--> <div class="close_mess"> <p><input type="checkbox" name="close_check" class="c_check">回答を送ってクローズする</p> </div><!--close_mess--> <button class="reply-button btn-c fosize-02" type="button" name="button">返信</button> </div> </form> <div class="reply-confirm"> <div class="overlay"> <div class="modal"> <button class="modal-close fosize-0.8 close" type="button" name="button"><i class="fa fa-times" aria-hidden="true"></i></button> <h2 class="modal-header">評価への返信</h2> <div class="modal-contents"> <p>評価への返信を送信しますがよろしいでしょうか?</p> <p>※評価への返信はサービスページに表示されます。</p> </div> <div class="modal-footer"> <div class="modal-form"> <button class="button-solid skin-white close" type="button" name="button">キャンセル</button> <button class="button-solid skin-black fo-white submit-btn" type="button" name="button">OK</button> </div> </div> </div> </div> </div><!--reply-confirm-->
javascript
1//返信フォーム 2$(".reply-button").on("click", function(){//返信をクリックしたら 3var txtArea = $(".text-area");//textareaの内容を texAreaに入れる 4 val = txtArea.val();//value値を取得 5 6 repComfirm = $(".reply-confirm");//アラートで表示する内容をrepComfirmに入れる 7 8 if (val !== "") { 9 repComfirm.show();//値がからじゃなかったらアラート表示 10 11 //アラートのokがクリックされたら(1回のみ=>oneにしないと値が存在する分通信される) 12 $(".modal-form .submit-btn").one("click", function(){ 13 14 15 var form = $('#myForm').get(0); 16 var fd = new FormData(form); 17 18 19 // console.log(fd); 20 21 $.ajax({ 22 urlc: "/talkrooms/talk", 23 type: "post", 24 25 data:fd, 26 dataType: "html", 27 processData: false, 28 contentType: false, 29 30 31 success: function() {//ajax成功 32 33 34//ここで記述したものが okをクリックしたらすぐ表示されるのですが、ここに送信した画像も表示させたいです。 35 36 var template = '<div class="message-box message-child">'; 37 38 39 template += '<div class="icon-small"><img src="/skima/img/'+/*fdのprfimg*/+'"></div>'; 40 template += '<div class="message-text">'; 41 template += '<h4></h4>'; 42 template += '<p class="data">'+/*fdのtalktime*/+'</p>'; 43 template += '<p>' + val + '</p>'; 44 template += '</div>'; 45 46 template += '</div>'; 47 48 var mesArea = $(".message-area"); 49 repComfirm.hide();//アラート非表示 50 mesArea.append(template); 51 val = txtArea.val(""); 52 }, 53 error: function() {//ajax失敗 54 alert('NG...'); 55 } 56 }); 57 }); 58 } 59 $(".close").one("click", function(){ 60 repComfirm.hide(); 61 if (val !== "") { 62 val = txtArea.val(""); 63 } 64 }); 65});
jsでformの値を入れた fdをphp側でどう受け取ればいいのかわかりません。
php
1//============== ajaxできた時の処理 ============== 2 3 if ($this->request->is("ajax")) {//ajax時の処理 4 5 $fd[] = $this->request->data['fd'];//form内の値受け取り 6 //$fd[]にするとエラー 7 8 $val = $this->request->data['val'];//メッセージ内容 9 $file01 = $this->request->data['file01'];//画像1 10 $file02 = $this->request->data['file02'];//画像2 11 $file03 = $this->request->data['file03'];//画像3 12 13 14 //======== 画像処理 ======== 15 16 $file=array($file01,$file02,$file03); 17 18 //入力された数分アップする 19 foreach($file as $imgkey => $fileName){ 20 21 22 if($fileName['size']>1000000){ 23 $error[]="ファイルサイズが大きすぎます。"; 24 $errorflg=1; 25 26 }else{ 27 28 if(is_uploaded_file($fileName["tmp_name"])){ 29 30 //pngとgifできたらjpgに変換するコピペする 31 32 33 if (exif_imagetype($fileName["tmp_name"]) == IMAGETYPE_PNG) {// 画像タイプ判定用 34 $type=".png"; 35 }else if(exif_imagetype($fileName["tmp_name"]) == IMAGETYPE_JPEG){ 36 $type=".jpeg"; 37 }else if(exif_imagetype($fileName["tmp_name"]) == IMAGETYPE_GIF){ 38 $type=".gif"; 39 } 40 41 //画像用ネーム 42 $filename = date("YmdHis"); 43 $img_name=substr(str_shuffle("1234567890abcdefghijklmnopqrstuvwxyz"),0,3); 44 $thum_upfile=WWW_ROOT.'img'.DS.$filename."_".$img_name.$type; 45 $talk_file[]=$filename."_".$img_name.$type; 46 47 48 49 50 if(move_uploaded_file($fileName["tmp_name"],$thum_upfile)){ 51 52 chmod($thum_upfile,0777); 53 54 55 }//if(move_uploaded_file($_FILES["thumnail"]["tmp_name"],$thum_upfile)) 56 57 }else{ 58 $talk_file[]=""; 59 }//if(is_uploaded_file($_FILES["upfile"]["tmp_name"])) 60 61 }//if($fileName['size']>1000000) 62 63 }//foreach($file as $imgkey => $fileName) 64 65 // 66 67 }//if ($this->request->is("ajax"))
###試したこと
送信時のパラメーターのファイルの部分が文字化けしてしまってるのも原因がわからないです。
(受け取っている値はhtmlのvalueとは違っていますが、これは大丈夫です。)
-----------------------------205773602212926704661967949010 Content-Disposition: form-data; name="comment" fefsf -----------------------------205773602212926704661967949010 Content-Disposition: form-data; name="p_img" noimage.gif -----------------------------205773602212926704661967949010 Content-Disposition: form-data; name="uid" 730rxt -----------------------------205773602212926704661967949010 Content-Disposition: form-data; name="talknob" 42170635 -----------------------------205773602212926704661967949010 Content-Disposition: form-data; name="talk_time" 2017-03-06 11:36:32 -----------------------------205773602212926704661967949010 Content-Disposition: form-data; name="uname" hara -----------------------------205773602212926704661967949010 Content-Disposition: form-data; name="buyer" 730rxt -----------------------------205773602212926704661967949010 Content-Disposition: form-data; name="seller" eu40vh -----------------------------205773602212926704661967949010 Content-Disposition: form-data; name="add_file_01"; filename="c8233ea6-249761.jpg" Content-Type: image/jpeg ÿØÿà�JFIF��d�d��ÿÛ�C�ÿÛ�CÿÀ��±�Ö�ÿÄ������������� ÿÄ�G�� ���� !1AQ"# Baq%&29¡±¶35:Rbuvx·ÁÑðñÿÄ������������ÿÄ�E���!"12AQ#aqBR356bcrs¡Á$4S²³Ct±ÂÃÿÚ���?�ýübÅ)S¦)LR¥1JbÅ)S¦)LR¥1JbÅ)S¦)LR¥1JbÅ)S¦)LR¥1JbÅ)S¦)LR¥:ëWûÐGýØ¥sS¦)LR¥1JbÅ)S¦)LR¥1JbÅ)S¦)LR¥1JbÓÊØ ÅÞªI±óö J¼\^9�{zôÈæ)'-wfX¹{r`»þ[#u:ÏÈ //実際は上記のような文字化けした文字がもっと長く続いています。 -----------------------------205773602212926704661967949010 Content-Disposition: form-data; name="add_file_02"; filename="" Content-Type: application/octet-stream -----------------------------205773602212926704661967949010 Content-Disposition: form-data; name="add_file_03"; filename="" Content-Type: application/octet-stream -----------------------------205773602212926704661967949010 Content-Disposition: form-data; name="close_check" on -----------------------------205773602212926704661967949010--
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/03/06 04:08
2017/03/06 04:56
2017/03/06 04:58
2017/03/06 05:25
2017/03/06 07:25
2017/03/06 07:53
2017/03/07 01:22
2017/03/07 01:32
2017/03/07 02:08