前提・実現したいこと
PHPで画像の表示させたい。
現在、PHPで画像アップロード処理を初めて勉強しています。
そこで簡易的に画像アップロードの機能を以下のように作りました。
※現在できているところをいかに書きます。
画像を選択し、送信をおす。
何もバリデーションに引っかからなければ、以下のように成功しましたのメッセージが表示されて、データベースにファイルパスが保存される。＋imgディレクトリにも画像ファイルが保存される。
データベース
imgディレクトリにも保存されていることが確認できる。
最後にvar_dumpでファイルパスが取得できるか確認すると、以下のように取得できていることは確認できる
発生している問題・エラーメッセージ
データベースに保存、ディレクトリに保存、var_dumpでデータの取得はできるところまではできているのですが、肝心の画像を表示させることができません。
img.php(画像投稿フォーム)
php
<?php require_once(ROOT_PATH .'/Models/Post.php'); ini_set('display_errors', "On"); $obj = new Post(); $files = $obj->getFile(); foreach($files as $file) { var_dump($file); } ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>画像投稿練習</title> </head> <body> <form action="img_upload.php" method="POST" enctype="multipart/form-data"> <h1>画像の投稿</h1> <div class="file-up"> <input type="hidden" name="MAX_FILE_SIZE" value="1048576"> <input type="file" name="img" accept="image/*"> </div> <input type="submit" name="upload" value="送信"> </form> <div class="file-index"> <?php foreach($files as $file): ?> <img src="<?php echo "{$file['file_path']}"; ?>" alt=""> <?php endforeach; ?> </div> </body> </html>
img_upload.php(フォーム送信先)
php
<?php require_once(ROOT_PATH .'/Models/Post.php'); ini_set('display_errors', "On"); $file = $_FILES['img']; $filename = basename($file['name']); $tmp_path = $file['tmp_name']; $file_err = $file['error']; $filesize = $file['size']; $upload_dir = 'img/'; $save_filename = date('Ymdhis').$filename; $save_path = $upload_dir.$save_filename; // ファイルのバリデーション // ①ファイルがそもそもあるか if(is_uploaded_file($tmp_path)) { if(move_uploaded_file($tmp_path, $save_path)) { echo "ファイルをアップしました！"; // DBに保存 $obj = new Post(); $img_date = $obj->fileSave($save_path); if($img_date) { echo "データベースに保存しました"; } else { echo "データベースへの保存が失敗しました"; } } else { echo "ファイルが保存できませんでした。"; } } else { echo "ファイルが選択されていません。"; } // ②拡張子は画像形式か $allow_ext = array('jpg', 'jpeg', 'png'); $file_ext = pathinfo($filename, PATHINFO_EXTENSION); if(!in_array(strtolower($file_ext), $allow_ext)) { echo "画像ファイルを添付してください。"; } // ③ファイルのサイズが1MB未満か if($filesize > 1048576 || $file_err == 2) { echo "ファイルのサイズは1MB未満にしてください。"; } ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <a href="img.php">戻る</a> </body> </html>
Post.php 画像投稿ロジック
php
<?php require_once(ROOT_PATH .'/Models/Db.php'); ini_set('display_errors', "On"); class Post { /** * ファイルデータの保存 * @param string $save_path 保存先のパス * @param bool $return */ public function fileSave($save_path) { $result = false; try { $sql = 'INSERT INTO img (file_path) VALUES (:file_path)'; $stmt = connect()->prepare($sql); $stmt->bindValue(':file_path', $save_path); $result = $stmt->execute(); return $result; } catch(\Exception $e) { echo "エラーが発生しました。". $e->getMessage(); return $result; } } /** * ファイルデータの取得 * @param array $fileDate */ public function getFile() { $sql = 'SELECT * FROM img'; $fileDate = connect()->query($sql); return $fileDate; } }
データベース接続
<?php require_once(ROOT_PATH .'/env.php'); ini_set('display_errors', "On"); // 接続チェックOK function connect() { $host = DB_HOST; $db = DB_NAME; $user = DB_USER; $pass = DB_PASS; $dsn = "mysql:host=$host;dbname=$db;charset=utf8mb4"; try { $pdo = new PDO($dsn, $user, $pass, [ PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION, PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC ]); return $pdo; } catch(PDOException $e) { echo "接続失敗です！". $e->getMessage(); exit(); } }
試したこと
img_upload.phpの絶対パスが違うのではないか？
$upload_dir = 'img/';
↓
$upload_dir = '/Applications/MAMP/htdocs/アプリ名/public/img/';
imgファイルはpublic配下にある。
MAMPのドキュメントルートは、Applications ▹ MAMP ▹ htdocs ▹ アプリ名 ▹ public
なので、絶対パスは
$upload_dir = 'img/';
で問題ないと思われる。
foreach($files as $file) { var_dump($file); }
の結果は、
array(2) { ["id"]=> string(2) "10" ["file_path"]=> string(29) "img/202104160402212448564.png" }
var_dump($files);の結果は、
object(PDOStatement)#3 (1) { ["queryString"]=> string(17) "SELECT * FROM img" }
まだ回答がついていません
会員登録して回答してみよう
