PHPで画像を取得してMySQLに保存、そしてMySQLからデータを取得して表示させる方法がわかりません

phpの初心者です。
このたびphpで画像をmysqlに保存して、そしてmysqlからデータを取得して表示させることに
チャレンジしてみることにしました。
以下のサイトを参考にさせていただきました。
http://www.kantenna.com/pg/2010/04/phpmysql.php

そしてmysqlでデータベースを作成してテーブルを作成しました。

 CREATE DATABASE tada;
  
 CREATE TABLE images (
 id int NOT NULL AUTO_INCREMENT,
 ext varchar(5),
 contents blob,
 PRIMARY KEY (id)
 );

insert.phpとimg.phpのファイルを作成しました。

insert.php

 <?php
 // 画像と拡張子を取得
 $img_path = 'C:/Program Files/Apache Software Foundation/Apache2.2\htdocs/img/ApacheMonitor.jpg';
 $img = file_get_contents($img_path);
 $ext = pathinfo($img_path, PATHINFO_EXTENSION);
  
 // データベースに保存
 $pdo = new PDO('mysql:host=localhost; dbname=tada', 'root', 'pass'');
 $stmt = $pdo->prepare('INSERT INTO images VALUES(0, :ext, :img)');
 $stmt->bindParam(':ext', $ext);
 $stmt->bindParam(':img', $img);
 $stmt->execute();
 ?>

</body> </html>

img.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <title></title> </head> <body> <?php // クエリの取得 /* if (preg_match('/^[0-9]+$/', $_GET['key'])) { $id = $_GET['key']; } else { throw new Exception('エラー'); } */ $id = 1;

 // データベースから対象のデータを取得
 $pdo = new PDO('mysql:host=localhost; dbname=tada', 'root', 'pass');
 $stmt = $pdo->prepare('SELECT ext, contents FROM images WHERE id=:id');
 $stmt->bindParam(':id', $id);
 $stmt->execute();
  
 // Content-typeテーブル
 $contents_type = array(
     'jpg'  => 'image/jpeg',
     'jpeg' => 'image/jpeg',
     'png'  => 'image/png',
     'gif'  => 'image/gif',
     'bmp'  => 'image/bmp',
 );
  
 // 出力
 $img = $stmt->fetchObject();
 header('Content-type: ' . $contents_type[$img->ext]);
 echo $img->contents;
 ?>

</body> </html>

insert.phpを実行するとエラーなく実行されます。phpMyAdmin 3.4.9 で、画像のデータを
保存して、拡張子をjpgにするとまた、元の画像が表示されますので画像データは壊れ
ずにmysqlに格納されたであろうことがわかります。

しかし、img.phpを実行するとFirefoxブラウザ（バージョン39)では
「画像ファイル "http://localhost/musen/img.php"は壊れているため、表示できませんでした。」
と表示されます。IE（バージョン8）では画像ではなく、文字化けの文章が表示されてしま
います。Chrome（バージョン 44）でも、画像は表示されず、画像が壊れていることを示
すアイコンが表示されています。

http://dev.ontheroad.jp/archives/11970
↑でHTTP 通信の内容をChromeで確認できるとのことでさっそく試してみました。
以下にその時の通信内容をキャプチャした画像を添付します。

何が原因でmysqlに保存した画像データがブラウザに表示されないのでしょうか？
どなたかアドバイスをよろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

画像出力の祭は、HTMLタグ等の出力はしてはいけませんので、
img.phpの

<!DOCTYPE... から <body> までの削除と、

最後の</body></html> を削除してお試しください。
空白や改行等、余計な出力もダメです。

投稿2015/08/13 15:23

rik

総合スコア1151

tada_tadaa

2015/08/13 15:30

早速のお返事ありがとうございます。 rik様のおっしゃるとおりにしたら無事に画像が表示されました。非常に助かりました。ありがとうございました。

tada_tadaa

2015/08/13 15:54

無事に解決できてなによりです。上記の方法ではhtmlのタグを全部外しましたが、htmlファイルに画像を読みこめるか試してみました。僕のような初心者の方がほかにもおられることを想定して、参考にしていただければと思います。まず、htmlのタグ等を全部外したimg2.phpを作成したらうまく画像が表示されました。次に img2.phpを外部htmlファイルで読み込むことで、htmlファイルでmysqlにアップした画像データの表示に成功しました。以下にソースを書いておきます。外部ｈｔｍｌファイル <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title></title> </head> <body> <img src="img2.php" alt="" /> </body> </html> これでmysqlにアップロードした画像データを、取得してｈｔｍｌファイルに表示させることができます。

行動規範の内容に同意します