目次
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(); //セッションを破棄
}
おわりに
いかがだったでしょうか。
ファイル送信を含むフォームを作る際は是非参考にしてみてください。
最後まで読んでいただき、ありがとうございました。
