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

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

ただいまの
回答率

88.91%

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

解決済

回答 3

投稿 編集

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

zuka3

score 3

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にデータが保存させできれば、あとは頑張れそうなのですが、そこができないです。
おそらく、補足情報が足りないと思いますので、質問してください。

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

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2020/07/15 21:32

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

    キャンセル

回答 3

+2

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

 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によるエラーハンドリングは必ず入れましょう。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/07/15 22:31

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

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

    キャンセル

  • 2020/07/15 22:44

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

    キャンセル

  • 2020/07/15 22:47

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

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

    キャンセル

checkベストアンサー

+1

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 を使ってどうなっているか確認してみてはいかがですか?

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/07/15 22:30

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

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

    キャンセル

0

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

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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