前提
データベース(以下db)画像データを保存して表示するプログラムを製作中です。
現在、phpとdbを使って画像の[tmp_name]等をfile_get_contentsを使ってdbを保存した後、
header('content-type')を用いた後、echoで出力しようとしました。
しかし、結果としては
上記のような結果となってしまい、画像が表示されませんでした
色々コメントアウトして調べた結果、この現象はheaderを使用した際に起こるようで、headerを外した場合、
と結果が返っているので、dbから検索結果が返ってきている事は確かなのかなと考えています。
ただ、この先どうすればいいのかわからず手詰まりになってしまったので質問させていただきます。
実現したいこと
・dbから取得した画像データを使用してphpで画像の表示を行いたい。
発生している問題・エラーメッセージ
・headerを使用すると画面が上記の真っ暗な画像の通りになる。
・headerを使用せずに出力すると文字化けしたデータが表示される。
該当のソースコード
使用した言語＆フレームワーク
html
css
javascript
php
phpmyadmin
bootstrap
文字数の都合上入力＋db保存は一部省略してます。
insertshohin.php
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>商品登録</title>
8 <style>
9 body{
10 background-color: #e9e9e9;
11 }
12 .inputs{
13 width:80%;
14 }
15 .fixText{
16 padding-left:10%;
17 }
18 .card{
19 border: 3px solid #000000;
20 border-radius: 15px;
21 }
22 #preview img {
23 width: 200px;
24 margin: 10px;
25 border: solid 1px silver;
26 }
27 </style>
28 <script>
29
30 </script>
31</head>
32<body>
33 <div class="card offset-3 col-6" style="padding-bottom:10%; ">
34 <h1 class="mt-5 mb-5 text-center">本の情報登録</h1>
35 <form action="insertShohinCheck.php" name="insertBookForm" method="post" enctype="multipart/form-data">
36 <div class="fixText">
37 <h6>画像<font color="#ff0000"></font></h6>
38 <input type="file" name="shohin_img[]" class="inputs" id="example" multiple><br/>
39 <!-- 👇ここにプレビュー画像を追加する -->
40 <div id="preview"></div>
41 <h6><font color="#ff0000">エラーメッセージをここに表示</font></h6>
42 <hr width="80%"><br/>
43 </div>
44 <div class="text-center">
45 <input type="submit" value="登録" class="btn">
46 </div>
47 </form>
48 </div>
49 <script>
50 function previewFile(file) {
51 const preview = document.getElementById('preview');
52 const reader = new FileReader();
53 reader.onload = function (e) {
54 const imageUrl = e.target.result;
55 const img = document.createElement("img");
56 img.src = imageUrl;
57 preview.appendChild(img);
58 }
59 reader.readAsDataURL(file);
60 }
61 const fileInput = document.getElementById('example');
62 const handleFileSelect = () => {
63 const files = fileInput.files;
64 for (let i = 0; i < files.length; i++) {
65 previewFile(files[i]);
66 }
67 }
68 fileInput.addEventListener('change', handleFileSelect);
69 </script>
70 //リンクのため以下省略
71</body>
72</html>
insertShohinCheck.php
1<?php
2 session_start();
3 require_once "DBManager.php";
4 require_once 'functions.php';
5 $db = new DBManager;
6 try {
7 $id=$db->INSERTShohin($_POST['shohin_mei'],$_POST['bunrui'],$_POST['hanbai_bi'],$_POST['shohin_kakaku'],$_POST['shohin_writer'],$_POST['shohin_conpany'],$_POST['isbn'],$_POST['tosyo']);
8
9 if(!empty($_FILES['shohin_img'])){
10 $db->INSERTShohinImg($id,$_FILES['shohin_img']['tmp_name'],$_FILES['shohin_img']['name'],$_FILES['shohin_img']['type'],$_FILES['shohin_img']['size']);
11 }
12 $shohin = $db->getShohin($id);
13 foreach ($shohin as $shohinData) {
14
15 }
16 } catch (Exception $e) {
17 echo $e.getMessage();
18 }
19?>
20<!DOCTYPE html>
21<html lang="en">
22<head>
23 <meta charset="UTF-8">
24 <meta http-equiv="X-UA-Compatible" content="IE=edge">
25 <meta name="viewport" content="width=device-width, initial-scale=1.0">
26 //リンク省略
27 <title>商品登録の確認</title>
28</head>
29<body>
30 <div class="row">
31 <div class="col-md-8 border-right">
32 <ul class="list-unstyled">
33 <?php for($i = 0; $i < $db->getShohinImgCount($id); $i++): ?>
34 <li class="media mt-5">
35 <?php
36 $pdo = connectDB();
37 $sql = 'SELECT * FROM shohindetails WHERE shohin_id = :shohin_id AND shohindetail_id = :shohindetail_id LIMIT 1';
38 $stmt = $pdo->prepare($sql);
39 $stmt->bindValue(':shohin_id', $id, PDO::PARAM_INT);
40 $stmt->bindValue(':shohindetail_id', $i, PDO::PARAM_INT);
41 $stmt->execute();
42 $image = $stmt->fetch();
43 header('Content-type: ' . $image['image_type']);
44 echo $image['shohin_img'];
45 ?>
46 </li>
47 <?php endfor; ?>
48 </ul>
49 </div>
50 </div>
51<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
52</body>
53</html>
DBManager.php
1<?php
2class DBManager{
3 private function dbConnect(){
4 $pdo = new PDO('mysql:host=localhost;dbname=name;charset=utf8',
5 'name,'pass');//都合上一部変更してます
6 return $pdo;
7 }
8 function shohinIdSearch($name,$bunrui,$day,$kakaku){
9 $pdo = $this->dbConnect();
10 $search = $pdo->prepare("SELECT shohin_id FROM shohins WHERE shohin_mei=? AND shohin_bunrui=? AND hanbai_bi=? AND shohin_kakaku=?");
11 $search->bindValue(1,$name,PDO::PARAM_STR);
12 $search->bindValue(2,$bunrui,PDO::PARAM_STR);
13 $search->bindValue(3,$day,PDO::PARAM_STR);
14 $search->bindValue(4,$kakaku,PDO::PARAM_INT);
15 $search->execute();
16 $id=0;
17 foreach($search as $key){
18 $id=$key['shohin_id'];
19 }
20 return $id;
21 }
22 function INSERTShohin($name,$bunrui,$day,$kakaku,$writer,$conpany,$isbn,$tosyo){
23 $pdo = $this->dbConnect();
24 $inS = $pdo->prepare("INSERT INTO shohins(shohin_mei,shohin_bunrui,hanbai_bi,shohin_kakaku) VALUES(?,?,?,?)");
25 $inS->bindValue(1,$name,PDO::PARAM_STR);
26 $inS->bindValue(2,$bunrui,PDO::PARAM_STR);
27 $inS->bindValue(3,$day,PDO::PARAM_STR);
28 $inS->bindValue(4,$kakaku,PDO::PARAM_INT);
29 $inS->execute();
30 $id = $this->shohinIdSearch($name,$bunrui,$day,$kakaku);
31 if(!empty($writer)){
32 $upwri = $pdo->prepare("UPDATE shohins set shohin_writer = ? WHERE shohin_id = ?");
33 $upwri ->bindValue(1,$writer,PDO::PARAM_STR);
34 $upwri ->bindValue(2,$id,PDO::PARAM_INT);
35 $upwri ->execute();
36 }
37 if(!empty($conpany)){
38 $upcon = $pdo->prepare("UPDATE shohins set shohin_conpany = ? WHERE shohin_id = ?");
39 $upcon ->bindValue(1,$conpany,PDO::PARAM_STR);
40 $upcon ->bindValue(2,$id,PDO::PARAM_INT);
41 $upcon ->execute();
42 }
43 if(!empty($isbn)){
44 $upisb = $pdo->prepare("UPDATE shohins set shohin_ISBN = ? WHERE shohin_id = ?");
45 $upisb->bindValue(1,$isbn,PDO::PARAM_INT);
46 $upisb ->bindValue(2,$id,PDO::PARAM_INT);
47 $upisb ->execute();
48 }
49 if(!empty($tosyo)){
50 $upcod = $pdo->prepare("UPDATE shohins set shohin_bookcode = ? WHERE shohin_id = ?");
51 $upcod ->bindValue(1,$tosyo,PDO::PARAM_INT);
52 $upcod ->bindValue(2,$id,PDO::PARAM_INT);
53 $upcod ->execute();
54 }
55 return $id;
56 }
57 function getShohin($id){
58 $pdo = $this->dbConnect();
59 $getShohin = $pdo->prepare("SELECT * FROM shohins WHERE shohin_id = ?");
60 $getShohin->bindValue(1,$id,PDO::PARAM_INT);
61 $getShohin->execute();
62 return $getShohin->fetchAll();
63 }
64
65 function INSERTShohinImg($id,$content,$name,$type,$size){
66 $pdo = $this->dbConnect();
67 for ($i=0; $i<count($name); $i++) {
68 $inImg = $pdo->prepare("INSERT INTO shohindetails(shohin_id,shohindetail_id,shohin_img,image_name,image_type,image_size,created_at) VALUES(?,?,?,?,?,?,now())");
69 $inImg ->bindValue(1,$id,PDO::PARAM_INT);
70 $inImg ->bindValue(2,$i,PDO::PARAM_INT);
71 $inImg ->bindValue(3,file_get_contents($content[$i]),PDO::PARAM_STR);
72 $inImg ->bindValue(4,$name[$i],PDO::PARAM_STR);
73 $inImg ->bindValue(5,$type[$i],PDO::PARAM_STR);
74 $inImg ->bindValue(6,$size[$i],PDO::PARAM_STR);
75 $inImg ->execute();
76 }
77 }
78 function getShohinImg($id,$detailid){
79 $pdo = $this->dbConnect();
80 $sql = 'SELECT * FROM shohindetails WHERE shohin_id = :shohin_id AND shohindetail_id = :shohindetail_id ';
81 $stmt = $pdo->prepare($sql);
82 $stmt->bindValue(':shohin_id', $id, PDO::PARAM_INT);
83 $stmt->bindValue(':shohindetail_id', $detailid, PDO::PARAM_INT);
84 $stmt->execute();
85 $image = $stmt->fetch();
86 return $image;
87 }
88 function getShohinImgCount($id){
89 $pdo = $this->dbConnect();
90 $getCount = $pdo->prepare("SELECT COUNT(*) FROM shohindetails WHERE shohin_id = ?");
91 $getCount ->bindValue(1,$id,PDO::PARAM_INT);
92 $getCount ->execute();
93 $data = $getCount->fetchAll();
94 return count($data);
95
96 }
97?>
Q&A
ベストアンサー
