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

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

新規登録して質問してみよう
ただいま回答率
86.12%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

解決済

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

kirin311
kirin311

総合スコア53

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

2回答

0グッド

0クリップ

218閲覧

投稿2018/10/26 23:46

編集2018/10/27 06:26

前提・実現したいこと

前提として、
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ページの「注目」タブのフィードに表示されやすくなります。

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

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

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

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

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

適切な質問に修正を依頼しましょう。

回答2

2

ベストアンサー

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

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

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

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

投稿2018/10/27 00:21

GrayWingAliance

総合スコア213

kirin311, m.ts10806👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

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

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

このような回答には修正を依頼しましょう。

回答へのコメント

kirin311

2018/10/27 06:44 編集

回答ありがとうございます。 実際にやってみましたが、また解決できないですorz >>それを別のファイルにしたJavaScriptから ・ロード時 ・ファイル転送成功時 すみません、別ファイルにしたJavascriptというのは、index.php内のJavascriptの内容を外部ファイルにするということでしょうか? そして、ファイル転送成功時というのは、AjaxのSuccessということでしょうか? 質問ばかりで申し訳ありません。どうしてもわからないことでしたので・・・。
GrayWingAliance

2018/10/27 12:38

お疲れ様です。 別ファイルにしたというのは、php部分とhtml+JavaScriptの部分に分離することを想定して書きました。 好みによってはhtmlとJavaScriptも分離してもよいと思います。(これは、コードが見やすくなりますが、アプリケーション全体としては多少遅くなる可能性があります。) ファイル転送成功時というのは、まさにAjaxが成功コードを返してきた時のことです。 また、今回セキュリティをあまり考えないのであれば構いませんが、SQLを実行する際はプリペアードステートメントと呼ばれるものを使用した方がよいと思います。 調べてみてください。 配列操作にまだ詰まっているようでしたら、ぜひまた質問してください。
kirin311

2018/10/27 23: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 03:54

ssasaki

総合スコア1167

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

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

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

このような回答には修正を依頼しましょう。

回答へのコメント

kirin311

2018/10/27 05:28

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

2018/10/27 05:38

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

2018/10/27 05:46

なるほど、そこからさらにJSでリロードする処理を書けばよかったのですね。 JSからPHPに渡すものとばかり思ってました。 GrayWingAliance様の内容で配列操作に行き詰ってますのでこちらの方向も別ファイルを作って考えてみます。

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

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。