Zenn
📕

PHPを使って画像をアップロードするシンプルな例

2022/08/14に公開
PHP
tech

特に何もしなくてもPHPが動く環境で使えるものをリポジトリに

https://github.com/CleverCure/phpSimpleImageUpload

動作環境

  • PHP 8.0.3 で確認

ファイル構成など

  • PHPを使って画像をアップロード
  • 投稿可能な拡張子はjpgとpng
  • 1MB以下の画像に制限
  • 投稿画像の最大幅を指定可能
ファイル構成
index.php
post.php
compleat.php
images
assets
   ┣  css
   ┃   ┗ style.css
   ┗  js
       ┗ script.js

imagesディレクトリにアップロードした画像が保存されます

フレームワークを使わずに最低限のファイル数、最低限のコードで

以下要点だけをおおまかに

index.php

CSRF対策 その1

ランダムな文字列を生成し変数とセッションへ
https://github.com/CleverCure/phpSimpleImageUpload/blob/main/index.php#L2-L4

画像などをアップロードする場合

https://github.com/CleverCure/phpSimpleImageUpload/blob/main/index.php#L18

post.php側で1MB以上の画像であればエラーメッセージを出す

https://github.com/CleverCure/phpSimpleImageUpload/blob/main/index.php#L19-L20

CSRF対策 その2

ランダムな文字列を $_POST['csrf'] としてpost.phpへ
https://github.com/CleverCure/phpSimpleImageUpload/blob/main/index.php#L23

post.php

画像を保存するディレクトリとアップロード画像の最大幅の指定

https://github.com/CleverCure/phpSimpleImageUpload/blob/main/post.php#L2-L3

CSRF対策 その3

セッションに保存された文字列とPOSTされた文字列が合致しない場合はトップページにリダイレクト
https://github.com/CleverCure/phpSimpleImageUpload/blob/main/post.php#L7-L10

アップロードされた画像になんらかの異常などがあるか

異常などがあればエラーメッセージを出力
https://github.com/CleverCure/phpSimpleImageUpload/blob/main/post.php#L13-L27

アップロードされた画像の拡張子を判別

jpg、png以外の場合はエラーメッセージを出力
拡張子判別後、ランダムな文字列で画像名も決定
https://github.com/CleverCure/phpSimpleImageUpload/blob/main/post.php#L29-L41

画像の保存と設定した最大幅を超えた場合の処理

最大幅より小さい画像はそのまま保存
最大幅より大きい画像は設定した最大幅にリサイズ
https://github.com/CleverCure/phpSimpleImageUpload/blob/main/post.php#L44-L70

問題なく画像が保存されたら compleat.php にリダイレクト

https://github.com/CleverCure/phpSimpleImageUpload/blob/main/post.php#L77-L78

script.js

画像のプレビュー処理とJavascriptでも1MB以上の画像が選択された場合はアラートを出力

https://github.com/CleverCure/phpSimpleImageUpload/blob/main/assets/js/script.js

まとめ

今回は画像のみのアップロードで確認画面などはありませんでしたが、実際の運用時にはテキストなどを一緒に送り確認画面を挟みデータベースへインサートという流れになると思います。
次回以降はそれらを考慮した記事を書ければと思います。

参考

https://qiita.com/mpyw/items/939964377766a54d4682

Discussion