php簡易掲示板の画像・動画アップロードについて

Question

やっていること。

下の画像のように掲示板を作っている。
名前、コメント、パスワードを入力し、ｈｔｍｌのtableタグで
番号、名前、コメント、時間、動画、画像を表示する。
画像・動画は$_FILESを使い拡張子を見て判断する。
画像・動画をmysqlのデータベースに登録し、selectして取り出す。

できないこと。

画像・動画はinsertでデータベースに登録できているのだが、取り出しても下の画像
のような表示になり、クリックすることもできない。

やりたいこと。

掲示板に画像・動画を表示したい。
データベースを見てみたのですが、$raw_dataが200行くらいあったのですが正常でしょうか？

汚いコードやと思いますが、よろしくお願いします。
以下コード

Main.php

<?php

/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
//セッション開始
session_start();
//エラーメッセージの初期化
$errorMessage = "";
//データベース処理読み込み
require_once("logindb.php");
require_once("func.php");
//インスタンス化
$pdo = db_connect();

//ファイルアップロードがあったとき
if (isset($_FILES['upfile']['error']) && is_int($_FILES['upfile']['error']) && isset($_FILES["upfile"]) && $_FILES["upfile"]["name"] !== ""){
    //エラーチェック
    switch ($_FILES['upfile']['error']) {
        
        case UPLOAD_ERR_OK: // OK
            break;
        case UPLOAD_ERR_NO_FILE:   // 未選択
            $errorMessage = "ファイルが無い。";
        case UPLOAD_ERR_INI_SIZE:  // php.ini定義の最大サイズ超過
            $errorMessage = "ファイルのサイズが大きすぎる。";
        default:
            $errorMessage = "error。";       
    }
    
    //画像・動画をバイナリデータにする．
    $raw_data = file_get_contents($_FILES['upfile']['tmp_name']);
    
    $tmp = pathinfo($_FILES['upfile']['name']);
    //拡張子代入
    $extension = $tmp["extension"];
    //拡張子確認
    if($extension == "jpg" || $extension == "JPG" || $extension == "jpeg"){
        $extension = "jpeg";
    }else if($extension == "png" || $extension == "PNG"){
        $extension = "png";
    }else if($extension == "gif" || $extension == " GIF"){
        $extension = "gif";
    }else if($extension == "mp4" || $extension == "MP4"){
        $extension = "mp4";
    }else{
        $errorMessage = "非対応ファイルです";
        exit(1);
    }
    
    //DBに格納するファイルネーム設定
    //サーバー側の一時的なファイルネームと取得時刻を結合した文字列にsha256をかける(暗号化する)．
   //$date = getdate();
    //$fname = $_FILES["upfile"]["tmp_name"].$date["year"].$date["mon"].$date["mday"].$date["hours"].$date["minutes"].$date["seconds"];
    //$fname = hash("sha256", $fname);
    $fname = $_FILES["upfile"]["tmp_name"];
    
    try{
                //トランザクション開始
                $pdo->beginTransaction();
                //プリペアドステートメント
                $sql = "INSERT INTO board (bd_name, bd_com, bd_date, bd_pass, fname, extension, raw_data) VALUES (
                            :bd_name, :bd_com, :bd_date, :bd_pass, :fname, :extension, :raw_data)";
                $stmh = $pdo->prepare($sql);
                $stmh->bindValue(':bd_name', $_POST['bdname'], PDO::PARAM_STR);
                $stmh->bindValue(':bd_com', $_POST['bdcom'], PDO::PARAM_STR);
                $stmh->bindValue(':bd_date', date('H:i:s'), PDO::PARAM_INT);
                $stmh->bindValue(':bd_pass', $_POST['bdpass'], PDO::PARAM_INT);
                $stmh->bindValue(':fname', $fname, PDO::PARAM_STR);
                $stmh->bindValue(':extension', $extension, PDO::PARAM_STR);
                $stmh->bindValue(':raw_data', $raw_data, PDO::PARAM_STR);
                $stmh->execute();
                //終了
                $pdo->commit();
                //print"データを".$stmh->rowCount()."件、挿入しました。<br>";   
                    
        } catch (PDOException $Exception) {
                //トランザクションをロールバック（元に戻す）
                $pdo->rollBack();
                print"err:".$Exception->getMessage();
        }
    
            
}


//新規投稿処理
if(isset($_POST['insert']) && $_FILES["upfile"]["name"] == ""){
    
    if(!empty($_POST['bdname']) && !empty($_POST['bdcom']) && !empty($_POST['bdpass'])){
        try{
                //トランザクション開始
                $pdo->beginTransaction();
                //プリペアドステートメント
                $sql = "INSERT INTO board (bd_name, bd_com, bd_date, bd_pass) VALUES (
                            :bd_name, :bd_com, :bd_date, :bd_pass)";
                $stmh = $pdo->prepare($sql);
                $stmh->bindValue(':bd_name', $_POST['bdname'], PDO::PARAM_STR);
                $stmh->bindValue(':bd_com', $_POST['bdcom'], PDO::PARAM_STR);
                $stmh->bindValue(':bd_date', date('H:i:s'), PDO::PARAM_INT);
                $stmh->bindValue(':bd_pass', $_POST['bdpass'], PDO::PARAM_INT);
                $stmh->execute();
                //終了
                $pdo->commit();
                //print"データを".$stmh->rowCount()."件、挿入しました。<br>";   
                    
        } catch (PDOException $Exception) {
                //トランザクションをロールバック（元に戻す）
                $pdo->rollBack();
                print"err:".$Exception->getMessage();
        }
        
    }else{
        $errorMessage = "入力されてないフォームがあります。";
    }
}


?>

<!--html開始-->
<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>簡昜掲示板</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <hr>
        簡昜掲示板
        <hr>
        <div><font color="#0000ff"><?php echo htmlspecialchars($_SESSION["NAME"], ENT_QUOTES); ?>さんようこそ！</font></div>
        <br>
        <form method="post" action="" enctype="multipart/form-data">
            <hr>
            新しく投稿する
            <hr>
            <div><font color="#ff0000"><?php echo htmlspecialchars($errorMessage, ENT_QUOTES); ?></font></div>
            <div>名前：<br></div>
            <input type="text" name="bdname" required="required" value="<?php echo htmlspecialchars($_SESSION["NAME"], ENT_QUOTES); ?>"><br>
            <div>コメント：<br></div>
            <textarea name="bdcom" required></textarea><br>
            <div>画像、動画アップロード：<br></div>
            <input type="file" name="upfile"><br>
            <div>※画像はjpeg方式，png方式，gif方式に対応。動画はmp4方式のみ対応。<br></div>
            <br>
            パスワード：<br>
            <input type="password" name="bdpass" required="required" maxlength='8' placeholder='8字以内'><br>
            <br>
            <input type="hidden" name="insert">
            <input type="submit" value="投稿する"><br>
        </form>
        <table border="1">
            <tbody>
                <tr>
                    <th>番号</th><th>名前</th><th>コメント</th><th>時間</th><th>画像・動画</th>
                </tr>
                <?php
                    $sql="SELECT*FROM board";
                    $stmh = $pdo->query($sql);
                    while ($row = $stmh->fetch(PDO::FETCH_ASSOC)){
                    //動画と画像で場合分け
                    $target = $row["fname"];
                ?>
                    <tr>
                        
                        <td><?= nl2br(h($row['bd_id']));?></td>
                        <td><?= nl2br(h($row['bd_name']));?></td>
                        <td><?= nl2br(h($row['bd_com']));?></td>
                        <td><?= nl2br(h($row['bd_date']));?></td>
                        <td>
                            <?php
                                //画像か動画か判断して取り出す。
                                if($row["extension"] == "mp4"){
                                    echo ("<video src=\"import_media.php?target=$target\" width=\"426\" height=\"240\" controls></video>");
                                }
                                elseif($row["extension"] == "jpeg" || $row["extension"] == "png" || $row["extension"] == "gif"){
                                    echo ("<img src='import_media.php?target=$target'>");
                                }
                            ?>
                        </td>
                    </tr>
                <?php               
                    }
                 
                ?>
            </tbody>
        </table>
        
        <br>
        [<a href="login.php">ログインフォームへ</a>]<br>
        [<a href="logout.php">ログアウトする</a>]<br>
    </body>
</html>

import_media.php

<?php

/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

//セッション開始
session_start();
//データベース処理読み込み
require_once("logindb.php");
//インスタンス化
$pdo = db_connect();

if(isset($_GET["target"]) && $_GET["target"] !== ""){
    $target = $_GET["target"];
}
else{
    header("Location: Main.php");
}
$MIMETypes = array(
    'png' => 'image/png',
    'jpeg' => 'image/jpeg',
    'gif' => 'image/gif',
    'mp4' => 'video/mp4'
);
try {
    $pass = "";
    $sql = "SELECT * FROM board WHERE fname like :fname";
    $stmh = $pdo->prepare($sql);
    $stmh->bindValue(':fname', $_GET["target"], PDO::PARAM_STR);
    $stmh->execute();
    $row = $stmt -> fetch(PDO::FETCH_ASSOC);
    header("Content-Type: ".$MIMETypes[$row["extension"]]);
    echo ($row["raw_data"]);
}
catch (PDOException $e) {
    echo("<p>500 Inertnal Server Error</p>");
    exit($e->getMessage());
}

?>

　６１番はhtmlではこのようになってました。

<tr>
                        
                        <td>61</td>
                        <td>img</td>
                        <td>hogehoge</td>
                        <td>09:49:49</td>
                        <td>
                            <img src='import_media.php?target=/Applications/XAMPP/xamppfiles/temp/php2G6pJn'>                        </td>
                    </tr>

Comments

[退会済みユーザー]

（phpソースも大事だけど）画像表示している箇所のナマのhtmlソースを掲載してくれればわかりそうな気がします。

[hellommm]

回答ありがとうございます！Main.phpの下にhtmlのコードがあります！一応そこのtableタグで画像を表示してます。それとは別のhtmlソースでしょうか？

[退会済みユーザー]

webブラウザ上で該当箇所を選択状態にして、右クリックメニューなどからソースを表示とかやれば、なぜリンク切れ状態なのかがわかるはず。そういう意味で、webブラウザが受け取ったhtmlコードを確認して質問文に追加してくれると良いと思います。

[hellommm]

なるほど！わかりました！ありがとうございます！

Answer 1

バイナリデータならわざわざリクエスト投げなくても表示できそうなものですが。

• HTMLファイルの中に画像を埋め込んで表示させる方法

echo ("<img src='data:image/{$row["extension"]};base64,{$row["raw_data"]}'>");

もちろん、正しく変換できていたらの話です。
こっちの方が良いかもしれません。

• PHPで画像バイナリ←→リソース変換

それか、いっそのこと画像バイナリデータを保存せずにアップロードだけにして、
ファイル名やIDと紐付けて通常の画像を表示させるように引っ張ってくるか、ですね。

Comments

[hellommm]

ありがとうございます！！
$row["raw_data"] = base64_encode($row["raw_data"]);
という文を付け、
echo ("<img src='data:image/{$row["extension"]};base64,{$row["raw_data"]}'>");
で表示することができました！

[m.ts10806]

ただ、バイナリデータは見ての通り大量の文字情報をそのままhtmlに放り込むことになるので、沢山画像を表示するような場面には向いていません。
状況次第で使い分けてください。

Answer 2

import_media.php?target=xxxを参照していますが、リンクになっていませんよね？
クリックして反応させるならアンカータグをつけて開くようにしてください
またとりあえず見せるならサムネイルをつくっておくとよいでしょう