php,html,jQuery.ajax()で画像ファイルとテキストをアップロードしたい

Question

jQuery.ajax()を用いて、画像とテキストデータを同時にアップロードしたいです。現状、テキスト入力、画像選択はできます。しかし、送信ボタンを押しても、postもされず、dbに保存もできてません。chromeにデベロッパツールには、エラーが出てこないです。
詳細↓
index.phpにて、画像とテキストを入力させ、ajaxでget_trip.phpにPOSTする。get_trip.phpは、受けとったデータをmysqlのDBに保存。load_trip.phpでsqlでselectし、index.phpで画像、テキストを表示です。function.phpは、db接続をしてます。DBは、テーブル名がtripsで,カラム詳細は,id,user_id,comment,image_name,image_content,image_type,image_size です。

画像ファイルのパスを一時的に保存したいです。

とりあえずの目的は、画像、テキストをDBに保存させる！！ことです。

//index.php
//関係あるところのみ
	             <div class="input_form">
                    <div class="container mt-5">
                       <div class="row">
                          <div class="col-md-4 pt-4 pl-4">        
                                <form id="trip_data" method="post" enctype="multipart/form-data" >
                                    <div class="form-group">
                                       <label>画像選択</label>
                                    <input type="file" name = "image" accept=".jpg, .png" required>
                                    </div>
                                    <textarea class="comment"></textarea>
                                    <button class="trip_button">Trip</button>
                                </form>
                          </div>
                        </div>
                   </div>
                </div>

<script>
// ****************trip_buttonが押された時*************************
	$(".trip_button").on("click", function(event){

        function file_upload(){
    	// フォームデータを取得
		var formdata = new FormData($('#trip_data').get(0));
		
		// POSTでアップロード
    	$.ajax({
        	url  : "get_trip.php",
        	type : "POST",
			data : { 
				formdata,
				"id": $(".list:first").data("list"),
				"user_id": "<?php echo $_SESSION['user_id']; ?>",
				"comment": $(".comment").val()
			},
        	cache       : false,
        	contentType : false,
        	processData : false,
			dataType    : "json",
			success: console.log('send!');
    	})
    	.done(function(data, textStatus, jqXHR){
			update();
			$(".comment").val("");
    	})
    	.fail(function(jqXHR, textStatus, errorThrown){
        	fail_err_msg(XMLHttpRequest, textStatus, errorThrown);
    	});
	
		}	
    
	});
</script>

//get_trip.php
<?php
	header("Content-type: application/json; charset=UTF-8");

	date_default_timezone_set("Asia/Tokyo");

	require("function.php");

	$sql = null;
	$stmt = null;
	
	$db = db_connect();

	$id = $_POST["id"];
	$user_id = $_POST["user_id"];
	$comment = $_POST["comment"];
	$datetime = new DateTime();
	$datetime = $datetime->format("Y-m-d H:i:s");
	
	if ($_SERVER['REQUEST_METHOD'] != 'POST') {
		// 画像を取得
	}else{
		// 画像を保存
		if(!empty($_FILES['image']['name'])){
			$name = $_FILES['image']['name'];
			$type = $_FILES['image']['type'];
			$image_content = file_get_contents($_FILES['image']['tmp_name']);
			$size = $_FILES['image']['size'];

			$sql = "INSERT INTO trips(id,user_id,comment,image_name,image_type,image_content,image_size,created_at) 
			VALUES(null,?,?,:image_name,:image_type,:image_content,:image_size,?)";
			$stmt->$db->prepare($sql);
			$stmt->bindValue(':image_name', $name, PDO::PARAM_STR);
        	$stmt->bindValue(':image_type', $type, PDO::PARAM_STR);
       		$stmt->bindValue(':image_content', $image_content, PDO::PARAM_STR);
        	$stmt->bindValue(':image_size', $size, PDO::PARAM_INT);
			$stmt->execute( array($user_id, $comment,$image_content, $datetime) );
		}
		
		unset($db);
    header('Location:index.php');
    exit();
	}

	unset($db);

 ?>

get_trip.phpのSQL文が違うのか、while文のとこが、違うの、合ってたとしたら、index.phpのajaxのコードが違うか...
どこがどのように違うのかわかりません。どなたか助けてください。色んなサイトを参考にして書いたのですが、うまくいきません...
DBにデータが保存させできれば、あとは頑張れそうなのですが、そこができないです。
おそらく、補足情報が足りないと思いますので、質問してください。

回答がついた後に指摘を受けて修正したので、既存の回答とは相違があります

Comments

[m.ts10806]

「動かない」「うまくいかない」では何も伝わりませんので、「実際に起きたこと」を記載してください。
https://teratail.com/help/question-tips#questionTips3-4

Answer 1

（他もあるけど直接関係しそうなところで）気になったところだけ。

var formdata = new FormData($('#trip_data').get(0));

trip_dataというIDは提示されたHTML内にはありません。

if(!empty($_FILES['image']['name'])){

imageというnameがついた入力コントロールはどこにもありません。

追記：

header('Location:get_trip.php');

Ajaxですが、どこに遷移させようとしているのでしょうか？
基本は「リクエストを送ってきた元」に返します。

try-catchによるエラーハンドリングは必ず入れましょう。

Comments

[zuka3]

コードを間違えました、修正します

[m.ts10806]

それはどういう意味の「間違えた」でしょうか。
現在のコードをコピペしたのではないですか？

[zuka3]

いろいろ試していて、複数のファイルがあるので、違うファイルをコピペしてしました。修正しました。

[m.ts10806]

このままだと、編集履歴から確認できるとはいえ、私の回答が「存在しないコードに対する回答」になっているので、一言但し書きを入れておいてもらえたらと。

[m.ts10806]

あと、 $_POST、$_FILESは送信できているのでしょうか。
デバッグしてみてください。

[m.ts10806]

しかしながら
>trip_dataというIDは提示されたHTML内にはありません。

ここは結局、違ったままですね。
trip_dataというclassはあるけど、idはないです。

[zuka3]

>このままだと、編集履歴から確認できるとはいえ、私の回答が「存在しないコードに対する回答」になっているので、一言但し書きを入れておいてもらえたらと。
teratailの使い方にまだ慣れてないので、どのように直せは良いですか？

[m.ts10806]

>いろいろ試していて、複数のファイルがあるので、違うファイルをコピペしてしました。修正しました。

です。あと「回答がついた後に指摘を受けて修正したので、既存の回答とは相違があります」とか。

Answer 2

PHP は知らない自分がレスするのもなんですが・・・

しかし、送信ボタンを押しても、postもされず、dbに保存もできてません。

サーバー側の話をする以前に jQuery ajax を使って送信できてないところを解決しないと先に進めないという話でしょうか？

jQuery ajax のコードの data の設定は正しいのでしょうか？ form データを post するのですよね？　自分が試した限りですが以下記事の View のコードのスクリプトのように FormData オブジェクトだけを data に設定すれば送信できるはずなのですが？

MVC でファイルのアップロード
http://surferonwww.info/BlogEngine/post/2019/08/03/file-upload-on-aspnet-mvc-application.aspx

スクリプトのみを抜粋すると以下の通りです。

<script type="text/javascript">
    //<![CDATA[
    $(function () {
      $('#ajaxUpload').on('click', function (e) {
        // FormData オブジェクトの利用
        var fd = new FormData(document.querySelector("form"));
 
        // 追加データを以下のようにして送信できる。フォーム
        // データの一番最後に追加されて送信される
        fd.append("CustomField", "This is some extra data");
 
        $.ajax({
          url: '/home/upload',
          method: 'post',
          data: fd,
          processData: false, // jQuery にデータを処理させない
          contentType: false  // contentType を設定させない
          }).done(function(response) {
            $("#result").empty;
            $("#result").text(response);
          }).fail(function( jqXHR, textStatus, errorThrown ) {
            $("#result").empty;
            $("#result").text('textStatus: ' + textStatus +
                            ', errorThrown: ' + errorThrown);
          });
      });
    });
    //]]>
</script>

中身が sample text file というテキストファイルを送信すると以下のようになります（Fiddler によるキャプチャ画像）。multipart の一番上が隠しフィールドのトークン、2 番目がテキストファイル、3 番目が上のコードの fd.append("CustomField", "This is some extra data"); で追加したデータです。

質問者さんも Fiddler を使ってどうなっているか確認してみてはいかがですか？

Comments

[m.ts10806]

＞FormData オブジェクトだけを data に設定すれば送信できるはずなのですが？

やはり、そこから突っ込むべきでした・・

Answer 3

単に「data:formdata」でよくないですか？
「dataType: "json"」もホントのjsonが返ってくる確信がないなら不要。
successとdoneを併用するのもやめてくださいや(successsは非推奨)