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

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

新規登録して質問してみよう
ただいま回答率
85.50%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CakePHP

CakePHPは、PHPで書かれたWebアプリケーション開発用のフレームワークです。 Ruby on Railsの考え方を多く取り入れており、Railsの高速性とPHPの機動性を兼ね備えています。 MVCやORMなどを「規約優先の考え方」で利用するため、コードを書く手間を省くことができます。 外部のライブラリに依存しないので、単体での利用が可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

12971閲覧

FormDataの値(ファイル)をajaxを使用してphpに渡したい

tarao

総合スコア28

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CakePHP

CakePHPは、PHPで書かれたWebアプリケーション開発用のフレームワークです。 Ruby on Railsの考え方を多く取り入れており、Railsの高速性とPHPの機動性を兼ね備えています。 MVCやORMなどを「規約優先の考え方」で利用するため、コードを書く手間を省くことができます。 外部のライブラリに依存しないので、単体での利用が可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/03/06 03:06

編集2017/03/06 03:23

ユーザー間でメッセージや画像を送信できるトークルームのシステムを作っています。
```ここに言語を入力
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#aqBR356bcrs‚‘¡Á$4Sƒ²³Ct“±ÂÃÿÚ� ��?�ýüb”Å)ŠS¦)LR˜¥1Jb”Å)ŠS¦)LR˜¥1Jb”Å)ŠS¦)LR˜¥1Jb”Å)ŠS¦)LR˜¥1Jb”Å)ŠS¦)LR˜¥:‡ëŠWûÐGýØ¥sŠS¦)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--

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

意図的なのかtypoなのかわかりませんので念の為
one→on?
urlc→url?

で、ajaxはsuccessするんですよね?
もしerrorならば
error:function(xhr,error){
console.log(error)
}

で状況確認ください

追記

javascript

1$(function() { 2 $('input[type=submit][value=upload]').on('click',function(e){ 3 e.preventDefault(); 4 var prm=[]; 5 var me=[]; 6 var file=[]; 7 var fd = new FormData(); 8 $(this).parents('form').find('input[type=text]').each(function(i){ 9 fd.append($(this).attr('name'),$(this).val()); 10 }); 11 $(this).parents('form').find('input[type=file]').each(function(i){ 12 me[i] = $(this); 13 file[i]=$(this).prop('files')[0]; 14 if(file[i]!==undefined){ 15 prm[i]= new Promise(function(resolver){ 16 var fr = new FileReader(); 17 fr.addEventListener("load", function(e){ 18 fd.append(me[i].attr('name'), new Blob([e.target.result],{"type":file[i].type}),file[i].name ); 19 resolver(this); 20 }); 21 fr.readAsArrayBuffer(file[i]); 22 }); 23 } 24 }); 25// setTimeout(function(){console.log(fd)},3000);//デバグ用 26 Promise.all( prm ).then(function(){ 27 console.log(fd); 28 $.ajax({ 29 "url":"recv.php", 30 "type":"post", 31 "data":fd, 32// "dataType":"json",//とりあえずjson以外で送ってうまくいったらjsonにする 33 "processData": false, 34 "contentType": false, 35 "success":function(data){ 36 console.log(data); 37 }, 38 "error":function(xhr,error){ 39 console.log(error); 40 }, 41 }); 42 }); 43 }); 44}); 45</script>

HTML

1<form method="post" enctype="multipart/form-data"> 2<input type="text" name="comment"><br> 3<input type="file" name="img1"><br> 4<input type="file" name="img2"><br> 5<input type="file" name="img3"><br> 6<input type="submit" value="upload"> 7</form>

受け側テスト

PHP

1<?PHP 2print_R($_POST); 3print_R($_FILES); 4?>

投稿2017/03/06 03:31

編集2017/03/06 07:36
yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tarao

2017/03/06 04:08

回答ありがとうございます。 oneは意図的ですが、urlcはtypoでした... ajaxはsuccessします。 console.log(fd) を試したのですが、fdからどのようにそれぞれの値をとるのかわからず 悩んでいます。 php側では配列のように受け取ればいいのかと思い、 $fd[] = $this->request->data['fd'];  こうしてみましたが、nullになってしまいます。 またjs内でform内のファイルが選択されたかの判別をしたいのですが、値の確認方法が分からずです
yambejp

2017/03/06 04:56

ちなみに今回の主旨は複数の画像ファイルをinput type=fileで選んでajaxで 送るということでしょうか? その部分だけ切り出してできるようになってから拡張しないと問題の切り分けができていないように見受けられます
yambejp

2017/03/06 04:58

もしかしたら画像じゃないケースもあります?
tarao

2017/03/06 05:25

ファイルは複数選択できるようになっています。 画像じゃないケースもあります。 今回の主旨は、ユーザーがメッセージを投稿する際にファイルもアップできる仕様です。 ただファイルのみの送信はできません。 okボタンをクリックと同時に投稿者の情報、投稿内容、画像を表示させたいです。 最終的にはajaxでファイルが選択されたかを判別して、あれば投稿された画像を受け取りがわダウンロードできるように実装したいと思っています。 説明がわかり辛くて申し訳ないです。
yambejp

2017/03/06 07:25

ajaxで複数ファイルを送る方法を追記します
yambejp

2017/03/06 07:53

ajaxでサーバーに事前におくっても、結局本ちゃんで送る際には バリデートが必要なのでちょっと無駄な気がします。 画像でないならサムネイルも表示できないし事前送信は不要では? (逆にすべてajaxで処理するなら例示のコードでいけます)
tarao

2017/03/07 01:22

返信遅くなってしまい申し訳ないです。 javascriptを使うことがなかったので、読み解くのすら時間がかかってしまいましたが、ファイルを送ることができました。 ありがとうございます! 事前にサーバーに送るというのは、formから、本ちゃんで送るのはajaxからという認識なのでしょうか?
yambejp

2017/03/07 01:32

ごめんなさい、私の認識とは違うみたいですね。 ajaxでバックグラウンドに先行してデータをおくってチェックし あとから正式にサブミットするのかと思っていました。 すべてajaxで完結するなら提示したソースをベースにして いただいて問題ないと思います
tarao

2017/03/07 02:08

ありがとうございます! これからどういう風に動くのかなど、勉強していきたいと思います
guest

0

$this->request->data['xxx']のxxxに設定するのはformの各入力エレメントのname属性値です。
ですので、ファイルのところは'add_file_01', 'add_file_02', 'add_file_03'を設定すれば取得できると思います。

投稿2017/03/06 05:39

turbgraphics200

総合スコア4267

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tarao

2017/03/06 07:24

これだとajaxを使わない、ただformでサーバー上に送ってるだけになってしまうと思い込んでいましたが、これでいいんですね。 php側の方では全部呼び出せました! ありがとうございます!! また質問になってしまうのですが、ajaxが成功した時、success内のdiv内に、画像が選択された時の処理(ダウンロードボタンを出す)をしたいのですが、phpに渡す前の段階で fdのadd_file_01、add_file_02、add_file_03のファイルが選択されたかの判別は可能でしょうか?
turbgraphics200

2017/03/06 07:34

各<input type="file">エレメントのchangeイベントを拾えば判定できるかと。
tarao

2017/03/07 01:25

if文で値が入っているかの判別でできました。 ありがとうございました!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問