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

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

ただいまの
回答率

90.33%

  • PHP

    21341questions

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

  • JavaScript

    17532questions

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

  • HTML

    9575questions

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

  • CakePHP

    2391questions

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

  • Ajax

    1154questions

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

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,982

tarao

score 20

ユーザー間でメッセージや画像を送信できるトークルームのシステムを作っています。

var talk_time = $('#talk_time');
      talktime= talk_time.val();


上記のように一つずつの値だと、phpに送って受け取ることも、jsファイル内のtemplateで表示することもできるのですが、FormDataを使用した時の受け取りとtemplateでの表示ができません。
ご教示いただけたらと思います。

<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-->
//返信フォーム
$(".reply-button").on("click", function(){//返信をクリックしたら
var txtArea = $(".text-area");//textareaの内容を texAreaに入れる
    val = txtArea.val();//value値を取得

    repComfirm = $(".reply-confirm");//アラートで表示する内容をrepComfirmに入れる

  if (val !== "") {
    repComfirm.show();//値がからじゃなかったらアラート表示

    //アラートのokがクリックされたら(1回のみ=>oneにしないと値が存在する分通信される)
    $(".modal-form .submit-btn").one("click", function(){


      var form = $('#myForm').get(0);
      var fd = new FormData(form);


     // console.log(fd);

       $.ajax({
              urlc: "/talkrooms/talk",
              type: "post",

              data:fd,
              dataType: "html",
              processData: false,
              contentType: false,


          success: function() {//ajax成功


//ここで記述したものが okをクリックしたらすぐ表示されるのですが、ここに送信した画像も表示させたいです。

            var template = '<div class="message-box message-child">';


                  template += '<div class="icon-small"><img src="/skima/img/'+/*fdのprfimg*/+'"></div>';
                  template += '<div class="message-text">';
                  template += '<h4></h4>';
                  template += '<p class="data">'+/*fdのtalktime*/+'</p>';
                  template += '<p>' + val + '</p>';
                  template += '</div>';

                template += '</div>';

            var mesArea = $(".message-area");
            repComfirm.hide();//アラート非表示
            mesArea.append(template);
            val = txtArea.val("");
          },
          error: function() {//ajax失敗
            alert('NG...');
          }
        });
     });
   }
   $(".close").one("click", function(){
     repComfirm.hide();
     if (val !== "") {
       val = txtArea.val("");
     }
   });
});


jsでformの値を入れた fdをphp側でどう受け取ればいいのかわかりません。

//==============  ajaxできた時の処理  ==============

            if ($this->request->is("ajax")) {//ajax時の処理

                $fd[] = $this->request->data['fd'];//form内の値受け取り
                //$fd[]にするとエラー

                $val = $this->request->data['val'];//メッセージ内容
                $file01 = $this->request->data['file01'];//画像1
                $file02 = $this->request->data['file02'];//画像2
                $file03 = $this->request->data['file03'];//画像3


                //======== 画像処理 ========

                $file=array($file01,$file02,$file03);

                                //入力された数分アップする
                foreach($file as $imgkey => $fileName){


                    if($fileName['size']>1000000){
                            $error[]="ファイルサイズが大きすぎます。";
                            $errorflg=1;

                    }else{

                        if(is_uploaded_file($fileName["tmp_name"])){

                             //pngとgifできたらjpgに変換するコピペする


                            if (exif_imagetype($fileName["tmp_name"]) == IMAGETYPE_PNG) {// 画像タイプ判定用
                                $type=".png";
                            }else if(exif_imagetype($fileName["tmp_name"]) == IMAGETYPE_JPEG){
                                $type=".jpeg";
                            }else if(exif_imagetype($fileName["tmp_name"]) == IMAGETYPE_GIF){
                                $type=".gif";
                            }

                            //画像用ネーム
                            $filename = date("YmdHis");
                            $img_name=substr(str_shuffle("1234567890abcdefghijklmnopqrstuvwxyz"),0,3);
                            $thum_upfile=WWW_ROOT.'img'.DS.$filename."_".$img_name.$type;
                            $talk_file[]=$filename."_".$img_name.$type;




                            if(move_uploaded_file($fileName["tmp_name"],$thum_upfile)){

                                chmod($thum_upfile,0777);


                            }//if(move_uploaded_file($_FILES["thumnail"]["tmp_name"],$thum_upfile))

                        }else{
                            $talk_file[]="";
                        }//if(is_uploaded_file($_FILES["upfile"]["tmp_name"]))

                    }//if($fileName['size']>1000000)

                }//foreach($file as $imgkey => $fileName)

                //

            }//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"

30rxt
-----------------------------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"

30rxt
-----------------------------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--
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

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

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

で状況確認ください

 追記

$(function() {
  $('input[type=submit][value=upload]').on('click',function(e){
    e.preventDefault();
    var prm=[];
    var me=[];
    var file=[];
    var fd = new FormData();
    $(this).parents('form').find('input[type=text]').each(function(i){
      fd.append($(this).attr('name'),$(this).val());
    });
    $(this).parents('form').find('input[type=file]').each(function(i){
      me[i] = $(this);
      file[i]=$(this).prop('files')[0];
      if(file[i]!==undefined){
        prm[i]= new Promise(function(resolver){
          var fr = new FileReader();
          fr.addEventListener("load", function(e){
            fd.append(me[i].attr('name'), new Blob([e.target.result],{"type":file[i].type}),file[i].name );
            resolver(this);
          });
          fr.readAsArrayBuffer(file[i]);
        });
      }
    });
//    setTimeout(function(){console.log(fd)},3000);//デバグ用
    Promise.all( prm ).then(function(){
      console.log(fd);
      $.ajax({
        "url":"recv.php",
        "type":"post",
        "data":fd,
//        "dataType":"json",//とりあえずjson以外で送ってうまくいったらjsonにする
        "processData": false,
        "contentType": false,
        "success":function(data){
          console.log(data);
        },
        "error":function(xhr,error){
          console.log(error);
        },
      });
    });
  });
});
</script>
<form method="post" enctype="multipart/form-data">
<input type="text" name="comment"><br>
<input type="file" name="img1"><br>
<input type="file" name="img2"><br>
<input type="file" name="img3"><br>
<input type="submit" value="upload">
</form>

受け側テスト

<?PHP
print_R($_POST);
print_R($_FILES);
?>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/06 13:08

    回答ありがとうございます。
    oneは意図的ですが、urlcはtypoでした...

    ajaxはsuccessします。
    console.log(fd) を試したのですが、fdからどのようにそれぞれの値をとるのかわからず
    悩んでいます。
    php側では配列のように受け取ればいいのかと思い、
    $fd[] = $this->request->data['fd'];  こうしてみましたが、nullになってしまいます。

    またjs内でform内のファイルが選択されたかの判別をしたいのですが、値の確認方法が分からずです

    キャンセル

  • 2017/03/06 13:56

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

    キャンセル

  • 2017/03/06 13:58

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

    キャンセル

  • 2017/03/06 14:25

    ファイルは複数選択できるようになっています。
    画像じゃないケースもあります。

    今回の主旨は、ユーザーがメッセージを投稿する際にファイルもアップできる仕様です。
    ただファイルのみの送信はできません。
    okボタンをクリックと同時に投稿者の情報、投稿内容、画像を表示させたいです。

    最終的にはajaxでファイルが選択されたかを判別して、あれば投稿された画像を受け取りがわダウンロードできるように実装したいと思っています。

    説明がわかり辛くて申し訳ないです。

    キャンセル

  • 2017/03/06 16:25

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

    キャンセル

  • 2017/03/06 16:53

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

    キャンセル

  • 2017/03/07 10:22

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

    キャンセル

  • 2017/03/07 10:32

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

    キャンセル

  • 2017/03/07 11:08

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

    キャンセル

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/06 16:24

    これだとajaxを使わない、ただformでサーバー上に送ってるだけになってしまうと思い込んでいましたが、これでいいんですね。
    php側の方では全部呼び出せました!
    ありがとうございます!!

    また質問になってしまうのですが、ajaxが成功した時、success内のdiv内に、画像が選択された時の処理(ダウンロードボタンを出す)をしたいのですが、phpに渡す前の段階で fdのadd_file_01、add_file_02、add_file_03のファイルが選択されたかの判別は可能でしょうか?

    キャンセル

  • 2017/03/06 16:34

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

    キャンセル

  • 2017/03/07 10:25

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

    キャンセル

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

  • ただいまの回答率 90.33%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • PHP

    21341questions

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

  • JavaScript

    17532questions

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

  • HTML

    9575questions

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

  • CakePHP

    2391questions

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

  • Ajax

    1154questions

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