LoginSignup
0
0

More than 1 year has passed since last update.

【PHP】画像のサイズや容量、ファイル形式でバリデーションをかける

Last updated at Posted at 2022-08-15

はじめに

こんにちは、

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

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

入力画面

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

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

おわりに

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0