前提・実現したいこと
前提として、
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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/27 06:44 編集
2018/10/27 12:38
2018/10/27 23:13