画像とコメントを表示させる

Question

前提・実現したいこと

web制作初心者です。
php,mysql,jsを用いて、画像＋コメントを投稿をしたいのですが、うまくできません。主に、ajaxでの処理です。
ajaxで、入力された画像とコメントをget_img_com.phpに遷移させたいです。コメントと画像の処理を分けるか否か(ajax)。data のところがどうやって書けばわかりません。
index.php で画像とコメントを入力させ、index.php内でjsでそれらを処理をする
get_img_com.php で画像・コメント情報をmysqlに保存する
load_img_com.php でmysqlのデータを表示させる
function.php は、db接続など処理してます。

ソースコードは、関係がありそうなとこだけ抜粋しています。
わからないことだらけですが、どうかご教授お願い致します。

該当のソースコード

<div class="input_form">
		<div class="container mt-5">
					<div class="row">
						<div class="col-md-4 pt-4 pl-4">	
							<form class="trip_image_button" method="post" enctype="multipart/form-data" >
								<div class="form-group">
									<label>画像選択</label>
									<input type="file" name="image" accept=".jpg, .png" required>
								</div>
			                    <button  class="btn btn-primary" >保存</button>
							</form>
						</div>
					</div>
				</div>
			<textarea class="comment"></textarea>
			<button class="trip_button">Trip</button>
		</div>

	// index内のajaxでの処理
$(".trip_button").on("click", function(event){
		$.ajax({
			type: "POST",
			url: "get_trip.php",
			data: {
				"id": $(".list:first").data("list"),
				"user_id": "<?php echo $_SESSION['user_id']; ?>",
				"comment": $(".comment").val(),
                // "image_content" :$(".image_content").val();
			},
			dataType: "json"
		})
		.done(function(data){
			update();
			$(".comment").val("");

		})
		.fail(function(XMLHttpRequest, textStatus, errorThrown){
			fail_err_msg(XMLHttpRequest, textStatus, errorThrown);
		});
		// $(".column").animate({scrollTop: 0}, "fast");
        function file_upload(){
    // フォームデータを取得
    var formdata = new FormData($('#trip_image_button').get(0));

    // POSTでアップロード
    $.ajax({
        url  : "get_trip.php",
        type : "POST",
        data : formdata,
        cache       : false,
        contentType : false,
        processData : false,
        dataType    : "html"
    })
    .done(function(data, textStatus, jqXHR){
        alert(data);
    })
    .fail(function(jqXHR, textStatus, errorThrown){
        alert("fail");
    });
	
	}
    
	});

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

	date_default_timezone_set("Asia/Tokyo");

	require("function.php");

	$sql = null;
	$stmt = null;

	$id = $_POST["id"];
	$user_id = $_POST["user_id"];
    $comment = $_POST["comment"];
    $image_name = $_POST["image_name"];
    $image_content = $_POST["image_content"];
	$datetime = new DateTime();
	$datetime = $datetime->format("Y-m-d H:i:s");

	try{
		$db = db_connect();

		$sql = "INSERT INTO trips(id, user_id, comment , image_name , image_content , created_at) 
        VALUES(null, ?, ?, ?,?,?)";
        $stmt = $db->prepare($sql);
        $stmt->execute( array($user_id, $comment ,$image_name , $image_content,$datetime) );
        

		$sql = "SELECT * FROM trips WHERE id>? ORDER BY created_at DESC";
		$stmt = $db->prepare($sql);
		$stmt->execute( array($id) );

		$content = array();
		while( $row = $stmt->fetch() ){
			$content[] = array(
				"id" => $row["id"],
				"user_id" => $row["user_id"],
                "comment" => $row["comment"],
                "image_name" => $row["image_name"],
                "image_content" => $row["image_content"],
				"created_at" => $row["created_at"]

			);
		}
		
		$db = null;
		echo json_encode($content);

	}catch(PDOExeption $e){
		echo $e->getMessage();
		die();
    }
 ?>

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

	require("function.php");

	$sql = null;
	$stmt = null;

	$id = $_POST["id"];
	


	try{
		$db = db_connect();

		$sql = "SELECT * FROM trips WHERE id>? ORDER BY created_at DESC";
		$stmt = $db->prepare($sql);
		$stmt->execute( array($id) );

		$content = array();
		while( $row = $stmt->fetch() ){
			$content[] = array(
				"id" => $row["id"],
				"user_id" => $row["user_id"],
				"comment" => $row["comment"],
				"image_content" => $row["image_content"],
				"created_at" => $row["created_at"]
			);
		}

		$db = null;
		echo json_encode($content);

	}catch(PDOExeption $e){
		echo $e->getMessage();
		die();
	}

 ?>

補足情報

mysql
db名: testdb
テーブル名　：trips
カラム名　：　id , user_id , comment , image_content , image_name , image_type ,created_at

多分、わかりづらいと思うので、php,mysql,js を用いた画像とコメントを表示させる方法でも構いません。
何卒、よろしくお願い致します。

Answer 1

画像を送るなら$_FILESで受けてください
画像をDBに保持するか、ファイルのままで管理するか要検討。後者の方が無駄が少ないと思います。
DBにはテキスト情報を保持しつつ、画像がファイルならそれを紐付けるidが必要になります

ソースについては全体的におかしい感じ

• insertしてselectしたり
• id>?したり
• 画像をloadする(？)のwhileで複数データを処理したり

どういう意図かわからないところが散見されます

sample

fetchで画像とコメントをおくる

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('#btn').addEventListener('click',e=>{
    e.preventDefault();
    var body=new FormData(e.target.form);
    var method="post";
    fetch("get_file.php",{body,method}).then(res=>res.text()).then(console.log);
  });
});

</script>
<form id="f1" method="post" enctype="multipart/form-data">
<input type="file" name="myfile"><br>
<input type="text" name="mycomment" value="hogehoge"><br>
<input type="submit" value="send" id="btn">
</form>

• get_file.php

<?PHP
print_r($_POST);
print_r($_FILES);

Comments

[zuka3]

ユーザランキング総合２位の方に、返信されてもらい、とても光栄です。返信ありがとうございます。

私がしたいことは、twitterlike のwebアプリケーションを作りたいです。主にコメントを入力して、画像を投稿をしたい人は、投稿をする。
また、それらの情報をDBに保存して、保存された情報をウェブ上に表示させる。DBの詳細は、idはユーザの固有番号、user_idは、ユーザの名前、commentは、コメント、image_nameは、画像の名前、image_content は画像自体の情報、image_type は画像の拡張子、image_sizeは、画像サイズ、created_at は、DBに追加された時間　です。

jsのところは、わかったのですが、get_file.php は具体的に何をしているのか教えて頂きたいです。
また、画像とコメントを取得してDBに保存するphpファイルとそれらの情報をDBから取り出して、ブラウザに表示させるphpファイルに分けたいです。

かなりわかりづらいと思いますが、ご教授お願い致します。

[yambejp]

get_file.phpは送られたデータを確認するためのものです。
今回はサンプルなので適当に書いています
具体的にはファイルが送られてきていること、postでデータが送られてきていることを
確認できるようにしてあります