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

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

ただいまの
回答率

89.52%

画像ドロップしたらMYSQLのINSERT実行後、SELECT内容更新

解決済

回答 2

投稿 編集

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

kirin311

score 51

 前提・実現したいこと

前提として、
http://www.it-view.net/drag-and-drop-file-upload-jquery-178.html
のサイトを参考にして、以下の2つのファイルを作りました。

①index.php
URL先の『まとめる』内容をコピーし、JS部分はuploadURLのみ変更。
SELECT処理も追加。

②uplod.php
『phpサーバーアップロードファイル保存』の内容の部分のみINSERTを行う処理を書いていました。

ここまでは実際に動作で画像のドロップダウン→INSERTでDBに登録、表示が出来ているのは、良かったのですが
ページをF5などで更新しないといけないのが問題で、ドロップダウンでSELECT更新するような具体的にコードをどうしたら良いのか悩んでいます。

uplod.phpでinsertに成功したら$upload_flag=1を与えてajaxのsuccessでdataから取ると考えていたのですけど、Javascriptの変数からPHPの変数にするというのは調べたところ、やはり出来ないとのことで・・・。

まとめると、「AjaxでInsertかつページを更新の方法手順」となります。
処理手順だけでもアドバイスを頂ければと思います。

 該当のソースコード

//index.php
<script>
.
.
(省略)
.
.

function sendFileToServer(formData, status) {
    var uploadURL = "./upload.php"; //Upload URL
    var extraData = {}; //Extra Data.
    var jqXHR = $.ajax({
        xhr: function() {
            var xhrobj = $.ajaxSettings.xhr();
            if (xhrobj.upload) {
                xhrobj.upload.addEventListener('progress', function(
                    event) {
                    var percent = 0;
                    var position = event.loaded || event.position;
                    var total = event.total;
                    if (event.lengthComputable) {
                        percent = Math.ceil(position /
                            total * 100);
                    }
                    //Set progress
                    status.setProgress(percent);
                }, false);
            }
            return xhrobj;
        },
        url: uploadURL,
        type: "POST",
        contentType: false,
        processData: false,
        cache: false,
        data: formData,
        success: function(data) {
            status.setProgress(100);

            $("#status1").append("File upload Done<br>");

            console.log(data);
        }
    });

    status.setAbort(jqXHR);
}
.
.
(省略)
.
.

</script>

// MySQL
try {
    $pdo = new PDO('mysql:host=127.0.0.1;dbname=c9;charset=utf8','user','password',
    array(PDO::ATTR_EMULATE_PREPARES => false));
} catch (PDOException $e) {
    exit('データベース接続失敗。'.$e->getMessage());
}

$stmt = $pdo->query("SELECT * FROM Items order by regdate desc");
$encode = "base64";
while($row = $stmt -> fetch(PDO::FETCH_ASSOC)) {
    print $row['id'];
    print $row['name'];
    print '<img src="data:images/'.$row['mimetype'].';'.$encode.','.base64_encode($row['binary']).'" width="30%" height="30%">';
}
<?php

//upload.php
//ファイルアップロード処理

  //バイナリデータ
    $fp = fopen($_FILES["file"]["tmp_name"], "rb");
    $imgdat = fread($fp, filesize($_FILES["file"]["tmp_name"]));
    fclose($fp);
    $imgdat = addslashes($imgdat);

    // ファイル名
    $file_name = $_FILES["file"]["name"];

    // 拡張子
    $dat = pathinfo($_FILES["file"]["name"]);
    $extension = $dat['extension'];

    // // 日付
    $reg_date = date("Y-m-d H:i:s");
    // $upp_date = date("Y-m-d H:i:s");


    // MIMEタイプ
    if ( $extension == "jpg" || $extension == "jpeg" ) $mime = "jpeg";
    else if( $extension == "gif" ) $mime = "gif";
    else if ( $extension == "png" ) $mime = "png";


try {
    // データベースに接続
    $pdo = new PDO(
        'mysql:dbname=c9;host=localhost;charset=utf8mb4',
        'user',
        'password',
        [
            PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
            PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
        ]
    );

       $sql = "INSERT INTO `c9`.`Items` VALUES (NULL, '".$file_name."', '".$imgdat."', '".$mime."', '".$reg_date."', '".$reg_date."', '0')";
    $res = $pdo->query($sql);

    $upload_flag =1;

} catch (PDOException $e) {


    header('Content-Type: text/plain; charset=UTF-8', true, 500);
    exit($e->getMessage()); 

    $upload_flag =0;

}

    return print $upload_flag;

?>

2018/10/27 15時時点の内容

index.phpの// MySQL以下を削除し
upload.phpにて修正。(先ほどまで、whileの中に$i++;を入れるという発想が思いつかなかった)

<?php

//upload.php
//ファイルアップロード処理

  //バイナリデータ
    $fp = fopen($_FILES["file"]["tmp_name"], "rb");
    $imgdat = fread($fp, filesize($_FILES["file"]["tmp_name"]));
    fclose($fp);
    $imgdat = addslashes($imgdat);

    // ファイル名
    $file_name = $_FILES["file"]["name"];

    // 拡張子
    $dat = pathinfo($_FILES["file"]["name"]);
    $extension = $dat['extension'];

    // // 日付
    $reg_date = date("Y-m-d H:i:s");
    // $upp_date = date("Y-m-d H:i:s");


    // MIMEタイプ
    if ( $extension == "jpg" || $extension == "jpeg" ) $mime = "jpeg";
    else if( $extension == "gif" ) $mime = "gif";
    else if ( $extension == "png" ) $mime = "png";


try {
    // データベースに接続
    $pdo = new PDO(
        'mysql:dbname=c9;host=localhost;charset=utf8mb4',
        'user',
        'password',
        [
            PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
            PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
        ]
    );

    $sql = "INSERT INTO `c9`.`Items` VALUES (NULL, '".$file_name."', '".$imgdat."', '".$mime."', '".$reg_date."', '".$reg_date."', '0')";
    $res = $pdo->query($sql);

    $stmt = $pdo->query("SELECT * FROM Items order by regdate desc");

    $obj = array();
    $i=0;
    while($row = $stmt -> fetch(PDO::FETCH_ASSOC)) {
        // $obj[] = $row;
        $obj[$i][] = $row['id'];
        $obj[$i][] = $row['name'];
        $obj[$i][] = '<img src="data:images/'.$row['mimetype'].';base64,'.base64_encode($row['binary']).'" width="30%" height="30%">';

        $i++;
    }

    header('Content-type: application/json');
    return print json_encode($obj,JSON_UNESCAPED_UNICODE);
} catch (PDOException $e) {
    header('Content-Type: text/plain; charset=UTF-8', true, 500);
    exit($e->getMessage()); 

}

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

+2

index.php内のデータベースからセレクトする部分を分離して、Ajaxで呼び出すようにするとよいでしょう。
上記のデータベースオブジェクトをwhileで回す部分を使用して、jsonオブジェクトを作成するとよいかと思います。

それを別のファイルにしたJavaScriptから

  • ロード時
  • ファイル転送成功時

の2か所で呼び出し、HTMLを作成するとよいのではないでしょうか。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/10/27 10:54 編集

    回答ありがとうございます。
    実際にやってみましたが、また解決できないですorz


    >>それを別のファイルにしたJavaScriptから

    ・ロード時
    ・ファイル転送成功時


    すみません、別ファイルにしたJavascriptというのは、index.php内のJavascriptの内容を外部ファイルにするということでしょうか?
    そして、ファイル転送成功時というのは、AjaxのSuccessということでしょうか?


    質問ばかりで申し訳ありません。どうしてもわからないことでしたので・・・。

    キャンセル

  • 2018/10/27 21:38

    お疲れ様です。
    別ファイルにしたというのは、php部分とhtml+JavaScriptの部分に分離することを想定して書きました。

    好みによってはhtmlとJavaScriptも分離してもよいと思います。(これは、コードが見やすくなりますが、アプリケーション全体としては多少遅くなる可能性があります。)

    ファイル転送成功時というのは、まさにAjaxが成功コードを返してきた時のことです。

    また、今回セキュリティをあまり考えないのであれば構いませんが、SQLを実行する際はプリペアードステートメントと呼ばれるものを使用した方がよいと思います。
    調べてみてください。

    配列操作にまだ詰まっているようでしたら、ぜひまた質問してください。

    キャンセル

  • 2018/10/28 08:13

    回答ありがとうございます。
    ひとまず、分離に関しては好みということなのでこのままで行かせていただきます。

    プリペアドステートメントについては、アドバイスをして頂いた身で申し訳ないのですが、こちらの都合で時間的な制約の問題から保留で目的を最優先としてますので・・・。

    配列操作は、『2018/10/27 15時時点の内容』でなんとかなりました。
    現在は、index.phpのajaxでsuccessのconsole.log(data)から配列内容を
    以下の2点
    ・ロード時
    ・ファイル転送成功時
    どのようにして結び付けられるのかと考えています。

    キャンセル

0

uplod.phpでinsertに成功したら$upload_flag=1を与えてajaxのsuccessでdataから取ると考えていたのですけど、Javascriptの変数からPHPの変数にするというのは調べたところ、やはり出来ないとのことで・・・。 

これでいいと思いますが、どの辺がうまくいかないのでしょうか?
PHP の変数を ajax へのレスポンスに入れることは極めて普通の話です。
もちろんそのままだと問題があったりしますが、JSON や XML で返せば何の問題もありません。
今回の場合に限って言えば、変数は単なる数値ですから、そのまま返しても問題ないと思いますが。。。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/10/27 14:28

    回答ありがとうございます。
    そのまま行っておりました。

    JSONにするという発想がなかったので。
    先ほど、GrayWingAliance様が回答して頂いた内容で考えているのですが、配列操作で詰まっていますorz

    キャンセル

  • 2018/10/27 14:38

    今回の件は、JSONでなくても、そのままでも行けますよ。
    console.log(data);
    ここで $upload_flag の値が出てきませんか?
    dataの中身を見て、該当する条件なら reload() するような JS を書けばいいと思います。

    ただ、作りとしてはGrayWingAlianceさんの回答のようにした方が、reloadしなくて良いので美しいです。

    キャンセル

  • 2018/10/27 14:46

    なるほど、そこからさらにJSでリロードする処理を書けばよかったのですね。
    JSからPHPに渡すものとばかり思ってました。

    GrayWingAliance様の内容で配列操作に行き詰ってますのでこちらの方向も別ファイルを作って考えてみます。

    キャンセル

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

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