【PHP・MySQL】データベースに画像を保存・表示する方法
Sara
Code for Fun
【PHP・MySQL】データベースに画像を保存・表示する方法 第７回「ファイルサイズのチェック」
Sara
ここまでの記事はこちら
サイズが大きすぎる画像を保存できてしまうと、サーバーに負担がかかってしまいます。
前回の形式チェックと同じように画像ファイルのサイズチェックも入れておきましょう。
ファイルのサイズチェックを入れる方法
第６回「形式チェック」が完了している状態から始めます。
今回は 1MB までのファイルでチェックを入れてみましょう。
前回形式チェックを入れた箇所にコードを追加します。（10~14行目）
10行目
$maxFileSize = 1048576;$_FILES[‘image’][‘size’]; で取得した画像サイズの単位は Byte（バイト）です。
1 MB = 1024 KB = 1048576 Byteなので $maxFileSize = 1048576; としています。
12行目
if ($size > $maxFileSize || !in_array($type, $validFileTypes)) {形式チェックと一緒にサイズの判定も入れています。
「画像サイズが $maxFileSize を超えている」または「形式が $validFileTypes に含まれていない」場合にエラーメッセージを表示します。
コードの修正
エラーメッセージを表示すると、左側に表示されるはずの登録済み画像が消えてしまいます。
登録済みの画像が常に表示されるようにコードを修正します。（1~13行目）
完成
以下のように動いていれば完成です。
ここまでのコード
Q
PHP・MySQL
カレンダー開発講座
カレンダーを開発しながら
- MySQLにデータを保存・編集・削除・検索する方法
- タブレット・スマートフォンに対応させる方法
- Datetimepicker の使い方
- CSV ファイルを使った祝日の表示
など幅広く学ぶことができる講座です。
何か開発してみたい方、より実用的なコードを学びたい方にオススメです。
ABOUT ME
書籍やオンライン講座でプログラミングを勉強してフリーランスのプログラマーになりました。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
この度はいつもブログ拝見させてもらい大変わかりやすく勉強させて頂いております。
ひとつ質問があるのですが、画像を表示するときフォルダに保存したファイル名でさなく任意でタイトルみたいな感じで表示って可能でしょうか？
初心者でなかなか難しくご助力があればありがたいのですが、
よろしくお願いいたします。
やってみたことといえば、スーパーグローバル変数にPOSTでechoをかけてみたりやってみてますが、画像と一緒にあげると表示されなかったりでイマイチでした。すいません。
当サイトを見つけていただきありがとうございます！
任意のタイトルはデータベースに保存したいのでしょうか？あるいは、表示する時に何か特定のワードを使えれば良いのでしょうか？
また「スーパーグローバル変数にPOSTでecho」という部分についても、もう少し詳しく教えて頂ければと思います。
返信本当にありがとうございます。
今、PHPやphpadmin（MySQL）を使って写真投稿サイトを作成しているとこなのですが、「画像名」、「画像」を入力し、画像を投稿したいと思っていまして。
大変、恐縮なのですがイメージ図を添付しても大丈夫でしょうか？
大丈夫でしたら添付いたします。
Saraさんのコードが一番わかりやすく参考にしたいと思いコメントさせていただきました。
また「スーパーグローバル変数にPOSTでecho」という部分についても、もう少し詳しくというとなのですが、
<p>画像名 :<input type="text" name="image_name" value＝""></p>
<p>画像 :<input type="file" name="image" accept=".jpg,.jpeg,.png"></p>
みたいな感じで、
<img src="image.php?id=<?= $images[$i]['image_id']; ?>" width="250" height="200">→ちょっと画像サイズを変えていますが、すいません。
for文？の中に$_POST['image_name'];を入れてみたり、等々調べながらやってみてはいるんですが
<strong>Warning</strong>: Undefined array key "" in <strong>C:\xampp\htdocs\ImageTest\list.php</strong>
このようになってしまったり表示が不安定だったりします。
長くなり説明がうまくできているかわかりませんが申し訳ありません。
画像添付して頂いて大丈夫です！
相澤さんが書かれている
<input type="text" name="image_name" value＝"">
は合っていると思います。
「for文の中に$_POST['image_name']」に問題がありそうで、登録と出力のコードが混在しているような気がします。
$_POSTは「フォームからPOST送信されたデータを受け取るもの」です。
for文の中で行うのは「データベースから取り出したデータを表示すること」です。
このあたりが少し曖昧になってしまっているのかなと思うので、以下の２点を確認してみてください。
１. imagesテーブルに名前は登録できていますか？
登録できていない場合は
$name = $_FILES['image']['name'];
を
$name = $_POST['image_name'];
のように変更しているかご確認ください。
２. データベースに保存できているが取り出せない場合
Warning: Undefined array key "" in C:\xampp\htdocs\ImageTest\list.ph
は「配列にキーがありません」というメッセージなので、image_name というスペルを正しく書いているか、コード全体をチェックしてみてください。
迅速な対応ありがとうございます。
やはり、エラーがでしまいました。
無事、画像見れますでしょうか？レイアウト自体は気にしなくて大丈夫なのですが
だされている要件が、
・「画像名」「画像」を入力し、画像を投稿することができる。
・投稿された画像の「画像名」「画像」を一覧で表示する。
・一覧から指定した画像の公開フラグを「公開」「非公開」に変更することができる。
・画像の投稿もしくは指定した画像の公開フラグが正常に更新された場合、完了のメッセージを表示する。
・画像投稿ボタンクリック時、「画像名」「画像」が設定されていない場合、エラーメッセージを表示し、画像投稿されない。
・投稿できる画像の形式は「JPEG」「PNG」のみとする。「JPEG」「PNG」以外の場合、エラーメッセージを表示し、画像投稿されない。
・「画像名」は半角英数字のみとする。半角英数字以外の場合、エラーメッセージを表示し、画像投稿されない。
・非表示の場合、背景色を変更し、表示・非表示の状態が見てわかるようにする。
・画像一覧ページへ遷移する事ができる。
ちょっと詳しく書いたので誤解を避けたいので、とある課題で案件ではないのです。
MySQLへのデータベースはSaraさんの紹介しているブログ通りのデータベースで作成しています。
追記で申し訳ありません
<?php for($i = 0; $i < count($images); $i++): ?>
<img src="image.php?id=<?= $images[$i]['image_id']; ?>" width="250" height="200">
<div class="media-body">
<a href="javascript:void(0);" onclick="var ok = confirm('削除しますか？'); if (ok) location.href='delete.php?id=<?= $images[$i]['image_id']; ?>'"><i class="far fa-trash-alt"></i> 削除</a>
<?php $images[$i]; ?><?PHP echo $_POST['image_name'];?>
<button id="btn1">表示</button>
</div>
<?php endfor; ?>
という風に記述すると、一度
<strong>Warning</strong>: Undefined array key"image_name"in <strong>C:\xampp\htdocs\ImageTest\list.php</strong>
とエラーが出て確認の為<input>に適当に英字を書いてページをリロードしなおすと、反映はするんですがブラウザ上に表示されている画像すべてにタイトルがついてしまう感じです。
input に入力した名前がデータベースに保存できていることが前提になりますが
<?php echo $_POST[‘image_name ‘]; ?>
は
<?php echo $images[$i][‘image_name’]; ?>
ではないでしょうか？？
先ほども書きましたが
$_POST → フォームからPOST送信されたデータを受け取る
for文の中 → データベースから取り出したデータを表示する
です。
無事できました表示することができました。
ご助力ほんとに感謝いたします。
PHPによる正規表現の方は、たぶん大丈夫だと思うんですが
また躓いたときSaraさんのブログ内容に沿った内容だった場合
ご相談してもよろしいでしょうか？
この度は誠にありがとうございました。
表示できたとのこと良かったです！
何かの課題の場合は出題者さんにお問い合わせ頂いた方が良いのかなと思いますが、ブログ内容に沿っている内容であればお気軽にご相談ください！