目次

    1.フォームの作成

    まずは基本となるフォームを作ります。

    inputタグのtype属性をfileにしてください。
    これにより、ファイルのアップロードボタンを設置できます。

    また、formタグのenctype属性をmultipart/form-dataにしてください。
    画像をsubmitする際は必須となります。


    <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>



    2.バリデーション

    submitされた内容を確認画面で受け取ります。
    普段テキストなどは$_POSTで受け取るかと思いますが、画像の場合は$_FILES で受け取ります。

    $_FILESはとても便利な変数で、それぞれ以下の値を格納してくれています。



    $_FILES['inputで指定したname']['name']             → ファイル名
    $_FILES['inputで指定したname']['type']              → ファイルのMINEタイプ
    $_FILES['inputで指定したname']['tmp_name']     → 一時保存ファイル名
    $_FILES['inputで指定したname']['error']             → アップロード時のエラーコード
    $_FILES['inputで指定したname']['size']               → ファイルサイズ(バイト単位)


    これらを利用してバリデーションを書いていきましょう。


    //バリデーションチェック
    $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();
    }


    はい、これでバリデーションの処理を作ることができました。


    3.ファイルの保持

    次にファイルの保持についてやっていきたいと思います。

    バリデーションに引っかかったときや、戻るボタンで入力画面に戻ってきたとき、前回入力した値をが保持されていなければいけませんね。

    テキストであれば このようにすれば前回入力した値が入ってくれます。
    <input type="text" value="前回の値">


    しかし、 type="file"の場合にはこの方法は使えません。
    ではどうするか、

    仮置用の一時フォルダを作り、そこに画像ファイルを格納しましょう。
    また、画像の名前はSESSIONに格納しておきましょう。


    //$_FAILESがあるとき
    if($_FILES['picture']['size'] > 1){
    //一時ファイルに画像を保存
    $filename = $_FILES['picture']['name'];
    $uploaded_path = './images_after/'.$filename;
    $img_path = move_uploaded_file($_FILES['picture']['tmp_name'],
    $uploaded_path);

    $_SESSION['picture_name'] = $_FILES['picture']['name'];

    //$_FAILEがないとき
    }elseif(isset($_SESSION['picture_name'])){
    $filename = $_SESSION['picture_name'];
    $file_path = './images_after/'.$filename;
    //一時フォルダにあるとき
    if (file_exists($file_path)){
    $image_size = getimagesize($file_path);
    $file_size = filesize($file_path);

    //一時フォルダにもないとき  
    } else {
    $error['picture'] = 'サイズ縦600px×横450px以内、jpgもしくはpng形式、
    2MB以内の画像をアップロードしてください。';
    }
    } else{
    $error['picture'] = 'サイズ縦600px×横450px以内、jpgもしくはpng形式、
    2MB以内の画像をアップロードしてください。';
    }


    考え方としては以下の通りです。


    画像が$_FILESで送られてきているか?
    →送られてきている
    → 一時フォルダに画像を保存

    →画像が送られてきていない
    $_SESSIONに存在するか?
    →存在する
    一時フォルダに存在するか?
    →すでに存在する
    →存在しない
    エラー 入力画面に戻る
    →存在しない
    →エラー 入力画面に戻る


    これで、送られてきた画像は一時フォルダに格納されることとなり、
    バリデーションなどで戻った場合でも、ファイルが保持されているかのように、
    動作するようになりました。


    送られてきたフォームの内容を、最終的にメールにして送信したい場合などは、
    一時フォルダにある画像を添付してあげればOKです。

    処理が終わったときは、一時フォルダ内とセッションを空にしておくのを忘れないように!

    $picture = '';
    if ($_SESSION['picture']['name']) {
    $picture = $_SESSION['picture']['name']
    }


    //メール送信処理
    use PHPMailer\PHPMailer\PHPMailer;
    use PHPMailer\PHPMailer\Exception;
    use PHPMailer\PHPMailer\SMTP;

    require('./PHPMailer/src/PHPMailer.php');
    require('./PHPMailer/src/Exception.php');
    require('./PHPMailer/src/SMTP.php');

    mb_language("Japanese");
    mb_internal_encoding("UTF-8"); //日本語で送信する設定
    $mail = new PHPMailer(true);// PHPMailerのインスタンスを生成
    $result = false; //メールの送信結果の初期値
    $username = ‘〇〇〇〇@gmail.com'; //Gmail 認証情報


    //メール内容
    try {
    $fileName = $_SESSION['picture']['name'];
    $filePath = './images_after/'.$fileName;
    $mail->AddAttachment($filePath, $fileName);//画像を添付
    $mail->CharSet = "UTF-8"; //日本語文字コード
    $mail->Encoding = "base64"; //日本語文字コード
    $mail->setFrom(‘xxxxx@xxx.com’, '〇〇');//差出人アドレス, 差出人名
     $mail->addAddress(‘zzzzz@zzzz.com, ‘〇〇');//送信先・宛先
    $mail->isHTML(false); // テキストメール
    $mail_body = "本文です";

    $mail->Subject件名です。';
    $mail->Body = mb_convert_encoding($mail_body, "UTF-8");
    $result = $mail->send(); //メール送信の結果を $result に代入
    }catch ( Exception $e ) {
    $result = false;
    $mail->ErrorInfo;
    }

    //メール送信に成功した場合
    if ($result) {
    array_map('unlink', glob('./images_after/*.*')); //一時フォルダ内の
    すべてのファイルを削除
    $_SESSION = array(); //セッション変数を空に
       session_destroy(); //セッションを破棄
    }



    おわりに

    いかがだったでしょうか。
    ファイル送信を含むフォームを作る際は是非参考にしてみてください。

    最後まで読んでいただき、ありがとうございました。
    PREV
    2022.08.10
    ストループ効果とWEBサイト
    NEXT
    2022.08.10
    AdobeXDで円グラフを作る方法!プラグインverと破線verの2パターン+アニメーションで動かす