php で画像と文字列(コメント)を表示させる

Question

php で画像とコメントを入力・選択させ、DBに保存し、ブラウザに表示させたいのですが、画像データとコメントのデータを同時に遷移させたいphpファイルに送りたいのですが、書き方があってるかわかりません。<form>....</form>の部分を Trip ボタンを押した時に送りたいです。

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

//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" : $(".image").val()
			},
			dataType: "json"
		})
		.done(function(data){
			update();
			$(".comment").val(""),
			$(".image").val("");
		})
		.fail(function(XMLHttpRequest, textStatus, errorThrown){
			fail_err_msg(XMLHttpRequest, textStatus, errorThrown);
		});
	});

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

	date_default_timezone_set("Asia/Tokyo");
　　　　　
　　　　//function.php はdb接続をする
	require("function.php");

	$sql = null;
	$stmt = null;

	$id = $_POST["id"];
	$user_id = $_POST["user_id"];
	$comment = $_POST["comment"];
	$name = $_FILES['image']['name'];
	$type = $_FILES['image']['type'];
	$content = file_get_contents($_FILES['image']['tmp_name']);
	$size = $_FILES['image']['size'];
	$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_type , 
		image_content , image_size , created_at) VALUES(null, ?, ?, ? , ?, ?, ?, ?)";
		$stmt = $db->prepare($sql);
		$stmt->execute( array($user_id, $comment, $name, $type, $content, $size,  $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_content" => $row["image_content"],
				"created_at" => $row["created_at"]
			);
		}

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

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

 ?>

わかりづらいと思いますが、よろしくお願いします。

Comments

[thyda.eiqau]

保存処理と取得処理 (= 表示処理) のコードを提示してください。

[m.ts10806]

現在起きてる問題や現象を明示してください。
合ってるかどうかは動かせば分かる話です。この内容では動かしてすらいないように見受けられます。
失敗してから覚えることの方が多いですよ

[thyda.eiqau]

ファイルを受け取るとか保存するとかいう以前に明らかに構文エラーがありますので、display_errorsなりphp -lなりを活用してまず構文エラーを解決してください。

[zuka3]

php code checker で確認したのですが、構文エラーがないとでて、どこが違うかわからないです。今のところ、コメントのみがdbに保存されています。なので、違うと思われるのは、$_FILESの宣言の仕方なのか、コメントのみが、dbにINSERTせれているので、SQL文のINSERT文が違うのか、ぐらいしか思いつかないです...

何卒、ご教授お願い致します。

Answer 1

"image" : $(".image").val()

これでは単にファイル選択したときに設定させる文字列が送られるだけです。ブラウザによっても内容が違います。
FormDataなど使ってください。
ajaxのオプションも足りていません。

「Ajax ファイルアップロード」で調べるとたくさん参考記事は出てきます。

Comments

[zuka3]

アドバイスありがとうございます！！！
こんな感じ⬇︎で書いてみたんですが、画像情報はdbに保存されないです...
$(".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();
},
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_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");
});

[zuka3]

↓このように書いたのですが、コメント、画像共にPOSTされません。
アドバイス頂けないでしょうか？？
$(".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);
});

}
});

Answer 2

formに action属性 がないですね。

http://www.htmq.com/html5/form.shtml

Comments

[zuka3]

formタグにaction属性は必須ですか？
class 属性?を使って、ajaxの方でclassの名前がclickされた時の処理を書いています。ajax　の処理の方で遷移させたいページにデータを送る処理を書いています。そっちの方もあってるかわからないですが...

[satokei]

> ajaxの方でclassの名前がclickされた時の処理を書いています
質問からでは、そのようなことは分からないです。
質問の内容を見直してはいかがでしょうか？