はじめに

こんにちは、

フォームを作る際、名前や生年月日とともに写真等の画像ファイルを送信させるとき、あるかと思います。

今回はそういった際の画像にたいしてバリデーションをかけるやり方を解説しようと思います。

入力画面

まずは基本となるフォームです。

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();
    }

おわりに

はい、これでバリデーションの処理を作ることができました。ぜひ参考にしてみてください。