Q&A
回答ありがとうございます。
そのまま行っておりました。
JSONにするという発想がなかったので。
先ほど、GrayWingAliance様が回答して頂いた内容で考えているのですが、配列操作で詰まっていますorz
前提・実現したいこと
前提として、
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()); } ?>
回答2件
0
ベストアンサー
index.php内のデータベースからセレクトする部分を分離して、Ajaxで呼び出すようにするとよいでしょう。
上記のデータベースオブジェクトをwhileで回す部分を使用して、jsonオブジェクトを作成するとよいかと思います。
それを別のファイルにしたJavaScriptから
- ロード時
- ファイル転送成功時
の2か所で呼び出し、HTMLを作成するとよいのではないでしょうか。
投稿2018/10/27 00:21
総合スコア218
0
uplod.phpでinsertに成功したら$upload_flag=1を与えてajaxのsuccessでdataから取ると考えていたのですけど、Javascriptの変数からPHPの変数にするというのは調べたところ、やはり出来ないとのことで・・・。
これでいいと思いますが、どの辺がうまくいかないのでしょうか？
PHP の変数を ajax へのレスポンスに入れることは極めて普通の話です。
もちろんそのままだと問題があったりしますが、JSON や XML で返せば何の問題もありません。
今回の場合に限って言えば、変数は単なる数値ですから、そのまま返しても問題ないと思いますが。。。
投稿2018/10/27 03:54
総合スコア1167
今回の件は、JSONでなくても、そのままでも行けますよ。
console.log(data);
ここで $upload_flag の値が出てきませんか？
dataの中身を見て、該当する条件なら reload() するような JS を書けばいいと思います。
ただ、作りとしてはGrayWingAlianceさんの回答のようにした方が、reloadしなくて良いので美しいです。
なるほど、そこからさらにJSでリロードする処理を書けばよかったのですね。
JSからPHPに渡すものとばかり思ってました。
GrayWingAliance様の内容で配列操作に行き詰ってますのでこちらの方向も別ファイルを作って考えてみます。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/27 06:44 編集
2018/10/27 12:38
2018/10/27 23:13