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

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

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

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

PHP

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

Q&A

解決済

1回答

1984閲覧

PHP/mysql に保存した画像データ が表示されない

mmen7

総合スコア1

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

PHP

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

0グッド

0クリップ

投稿2021/03/30 20:59

編集2021/03/30 22:02

前提・実現したいこと

PHP/Mysql を使って画像を表示させたい

発生している問題・エラーメッセージ

PHPでアップロードフォームに ①画像②captionを登録すると
アップロードフォームに画像が表示されるページを作成中です。

②キャプションは表示されるのですが、①画像表示ができません。
検証⇨エラー表示すると 「404 not found」との表示

検証画面
イメージ説明

該当のソースコード

php

1<?php 2require_once "./dbc.php"; 3$files = getAllFile(); 4 5?> 6<!-- ①フォームの説明 --> 7<!-- ②$_FILEの確認 --> 8<!-- ③バリデーション --> 9<!DOCTYPE html> 10<html lang="ja"> 11 <head> 12 <meta charset="UTF-8" /> 13 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 14 <title>アップロードフォーム</title> 15 </head> 16 <style> 17 body { 18 padding: 30px; 19 margin: 0 auto; 20 width: 50%; 21} 22textarea { 23 width: 98%; 24 height: 60px; 25} 26.file-up { 27 margin-bottom: 10px; 28} 29.submit { 30 text-align: right; 31} 32.btn { 33 display: inline-block; 34 border-radius: 3px; 35 font-size: 18px; 36 background: #67c5ff; 37 border: 2px solid #67c5ff; 38 padding: 5px 10px; 39 color: #fff; 40 cursor: pointer; 41} 42</style> 43 44 45 <body> 46 <form enctype="multipart/form-data" action="./file_upload.php" method="POST"> 47 <div class="file-up"> 48 <input type="hidden" name="MAX_FILE_SIZE" value="1048576" /> 49 <input name="img" type="file" accept="image/*" /> 50 </div> 51 <div> 52 <textarea 53 name="caption" 54 placeholder="キャプション(140文字以下)" 55 id="caption" 56 ></textarea> 57 </div> 58 <div class="submit"> 59 <input type="submit" value="送信" class="btn" /> 60 </div> 61 </form> 62 <div> 63 <?php foreach($files as $file): ?> 64 <img src = "<?php echo "{$file['file_path']}" ?>" alt = ""> 65 <p><?php echo "{$file['description']}" ?></p> 66 <?php endforeach; ?> 67 </div> 68 </body> 69</html> 70

php

1<?php 2// ①ファイルの保存 3// ②DB接続 4// ③DBへの保存 5require_once "./dbc.php"; 6 7// ファイル関連の取得 8$file = $_FILES['img']; 9$filename = basename($file['name']); 10$tmp_path = $file['tmp_name']; 11$file_err = $file['error']; 12$filesize = $file['size']; 13$upload_dir = 'Applications/MAMP/htdocs/final_kadai/images/'; 14$save_filename = date('YmdHis'). $filename; 15$err_msgs = array(); 16$save_path = $upload_dir . $save_filename; 17 18// 取得情報の確認 19// var_dump($file); 20 21// キャプションを取得 22$caption = filter_input(INPUT_POST,'caption', 23FILTER_SANITIZE_SPECIAL_CHARS); 24 25// キャプションのバリデーション 26// 未入力 27if(empty($caption)){ 28 echo 'キャプションを入力してください'; 29 echo '<br>'; 30 31} 32 33// 文字数 34if(strlen($caption) > 140){ 35 array_push($err_msgs,'キャプションは140字以内で入力してください'); 36} 37 38// ファイルのバリデーション 39// ファイルサイズが 1MB未満か 40if($filesize > 1048576 || $file_err == 2){ 41 array_push($err_msgs,'ファイルサイズは1MB未満にしてください'); 42} 43 44// 拡張子は画像形式か 45$allow_ext = array('jpg','jpeg','png'); 46$file_ext = pathinfo($filename,PATHINFO_EXTENSION); 47 48if(!in_array(strtolower($file_ext),$allow_ext)){ 49 array_push($err_msgs,'画像ファイルを添付してください'); 50 51} 52if(count($err_msgs) === 0){ 53 54 55// ファイルはあるか 56if(is_uploaded_file($tmp_path)){ 57 if(move_uploaded_file($tmp_path,$upload_dir. 58 $save_filename)){ 59 echo $filename . 'を'. $upload_dir.'へアップしました 60 '; 61 // DBに保存(ファイル名、ファイルパス、キャプション) 62 $result = fileSave($filename,$save_path, 63 $caption); 64 if($result){ 65 echo "データベースに保存しました!"; 66 }else{ 67 echo "データベースへの保存が失敗しました"; 68 } 69 }else{ 70 echo 'ファイルが保存できませんでした'; 71 } 72}else{ 73 echo 'ファイルが選択されていません'; 74 echo '<br>'; 75} 76}else{ 77 foreach ($$err_msgs as $msg){ 78 echo $msg; 79 echo '<br>'; 80 } 81 } 82 83?> 84<a href = "./upload_form.php">戻る</a> 85 86

php

1<?php 2function dbc() 3{ 4 $host ="localhost"; 5 $dbname = "f_db"; 6 $user = "root"; 7 $pass ="root"; 8 $dns = "mysql:host=$host; 9 dbname=$dbname;charset = utf8"; 10 $dbh = new PDO($dns, $user, $pass); 11 var_dump($dbh); 12 try{ 13 $pdo = new PDO($dns, $user, $pass, 14 [ 15 PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION, 16 PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC 17 ] 18 ); 19 // echo "成功"; 20 return $pdo; 21 }catch(PDOException $e){ 22 exit('DbConnectError:'.$e->getMessage()); 23 } 24} 25// ファイルデータを保存 26// @parem string $filename ファイル名 27// @parem string $save_path 保存先のパス 28// @parem string $caption 投稿の説明 29// @return bool $result 30// データ登録sql作成 31function fileSave($filename,$save_path,$caption) 32{ 33 $result = False; 34 $sql = "INSERT INTO file_table (file_name, file_path, 35 description ) VALUE (?,?,?)"; 36 try{ 37 $stmt = dbc()->prepare($sql); 38 $stmt->bindValue(1,$filename); 39 $stmt->bindValue(2,$save_path); 40 $stmt->bindValue(3,$caption); 41 $result = $stmt->execute(); 42 return $result; 43 } catch(\Exception $e) { 44 echo $e->getMessage(); 45 } 46} 47 48// ファイルデータを取得 49//  return array // $fileData 50// データ登録sql作成 51function getAllFile() 52{ 53 $sql = "SELECT * FROM file_table"; 54 55 $fileData = dbc()->query($sql); 56 57 return $fileData; 58} 59 60getAllFile(); 61

試したこと

当初、uploadform.phpの最後、php<>内
画像表示用のコードに問題があると思い、
コードを見返したのですが、解決しませんでした。

その後、冒頭に書いた404not foundを確認したので、
file_upload.phpの 13行目 upload_dir 以下格納場所を変更すると
今度はファイルのアップロード(phpMyadminへの保存すらできなくなってしまいました)

youtubeのPHP/Mysqlの画像アップロード動画等を見ても分からず、
しまいにはできていたことを出来なくしてしまい
3〜4時間位詰まってしまいました

お分かりのかたご教示頂けますとありがたいです。
よろしくお願いします

補足情報(FW/ツールのバージョンなど)

エディタ:vscode
SQL:phpMyAdmin

ここにより詳細な情報を記載してください。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/03/30 21:25

コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564 あと、御覧の通り、マークダウンのcode機能の中では他のマークダウンの機能は無効化されますので、外に出して、可能なら投稿前にプレビューでチェックしてください。
FKM

2021/03/31 00:47

vs-codeはあまり自分は信用してませんね。なぜなら、キャッシュエラーが起きやすいからです。 実際Chromeでプレビューテストして直接パスを確認した方がいいですよ。
guest

回答1

0

ベストアンサー

接続時にエラーは出てませんか?
スペースや改行はないほうがいいです。
DSNの駄目なスペースはどれか
ひとまず上記は対応しつつ、「正しくファイルが保存された先をリンクできているか」を確認してください。

file_pathフィールドに保存されているのは「サーバー内の絶対パス」に見えます。
ブラウザからアクセスできるのは「DocumentRootからのパス」です。
「サーバー内の絶対パス」を利用するのであれば、そのままechoするのではなく、ファイルの実態をバイナリとして取得して出力する等(base64とか)工夫が必要です。

「保存している場所が決まっている」のでしたら、ファイル名だけ保存しておいて「DocumentRootから置き場所へのパス」は固定で、ファイル名だけ可変にすれば良いと思います。

割とこの手の質問は多いです。
[画像 保存 tag:PHP] の検索結果: 729件

投稿2021/03/30 22:29

編集2021/03/30 22:30
m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mmen7

2021/03/30 22:45

迅速なご回答ありがとうございます。とても助かります。 接続時のエラーは出ないのですが、 vscodeにphpの拡張機能を入れてみます。 出先でpcを触れる環境にないので、 ご回答や類似質問をよくよみつつ後ほど修正してみます。 解決しましたら、またこちらからご連絡させて頂きます!
m.ts10806

2021/03/30 22:59

>vscodeにphpの拡張機能を入れてみます。 DSNの解析は実行時に行われるので拡張機能ではとれません。 try-catchのcatchのほうにいってないか(異常捕捉)を確認してもらいたかったのです。まぁDSN文字列はスペースも改行も入れないのが確実です。
mmen7

2021/03/30 23:08

貼付け頂いた、 "DSNの駄目なスペースはどれか" をよくよく読むと理解できました。 ご指摘どおり無駄なスペースや改行がついている気がするので、 そこをまずは直します。 また、パスについては 「保存している場所が決まっている」ので ご回答にある "ファイル名だけ保存しておいて「DocumentRootから置き場所へのパス」は固定で、ファイル名だけ可変にすれば良いと思います。"が選択肢になってくるのですが、ファイル名を可変にする とはどのような処理になりますでしょうか。 重ねての質問ですみません。
m.ts10806

2021/03/30 23:11

>ファイル名を可変にする  「DBから取得してきた値」=「可変」「動的」です。 img src=/images/${image_name}
mmen7

2021/03/31 02:01

かしこまりました。確認してみます。ありがとうございます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問