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

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

ただいまの
回答率

88.91%

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

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 240

zuka3

score 3

前提・実現したいこと

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  を用いた画像とコメントを表示させる方法でも構いません。
何卒、よろしくお願い致します。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

+2

画像を送るなら$_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);

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/07/07 19:06

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

    私がしたいことは、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ファイルに分けたいです。

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

    キャンセル

  • 2020/07/07 19:51

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

    キャンセル

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

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

関連した質問

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