はじめに
こんにちは、
フォームを作る際、名前や生年月日とともに写真等の画像ファイルを送信させるとき、あるかと思います。
今回はそういった際の画像にたいしてバリデーションをかけるやり方を解説しようと思います。
入力画面
まずは基本となるフォームです。
inputタグのtype属性をfileにしてください。
これにより、ファイルのアップロードボタンを設置できます。
また、formタグのenctype属性をmultipart/form-dataにしてください。
画像をsubmitする際は必須となります。
entry.php
<form action="./confirm.php" method="POST" enctype="multipart/form-data">
<tr>
<th>写真</th>
<td>
<div>
<input type="file" name="picture" class="js-upload-file" id="picture_upload" >ファイルを選択
</div>
</td>
</tr>
</form>
確認画面
submitされた内容を確認画面で受け取ります。
普段テキストなどは$_POST
で受け取るかと思いますが、画像の場合は$_FILES
で受け取ります。
$_FILESはとても便利な変数で、それぞれ以下の値を格納してくれています。
$_FILESはそれぞれ以下を、格納してます。
$_FILES['inputで指定したname']['name'] :ファイル名
$_FILES['inputで指定したname']['type'] :ファイルのMINEタイプ
$_FILES['inputで指定したname']['tmp_name'] :一時保存ファイル名
$_FILES['inputで指定したname']['error'] :アップロード時のエラーコード
$_FILES['inputで指定したname']['size'] :ファイルサイズ(バイト単位)
これらを使ってバリデーションをかけていきましょう。
confirm.php
<?php
//バリデーションチェック
$error = array();
//許可するMIMEタイプ
$file_type = array(
'image/jpeg',
'image/png',
);
$image_size = getimagesize($uploaded_path);//画像の縦幅、横幅の取得
if (!in_array($_FILES['picture']['type'], $file_type)) {
$error['picture'] = 'jpgもしくはpng形式の画像をアップロードしてください。';
} elseif ((int)$_FILES['picture']['size'] > 2097152){
$error['picture'] = '2MB以内の画像をアップロードしてください。';
} elseif ($image_size["0"] > 450){
$error['picture'] = '横サイズ450px以内の画像をアップロードしてください。';
} elseif ($image_size["1"] > 600){
$error['picture'] = '縦サイズ600px以内の画像をアップロードしてください。';
}
//バリデーションエラーがある場合は入力フォームに戻す
if ( count( $error ) > 0 ) {
header("Location: ./entry.php");
exit();
}
おわりに
はい、これでバリデーションの処理を作ることができました。ぜひ参考にしてみてください。