AjaxとPHPで画像をアップロードする

フォーム投稿で画像をアップロードする際に、追従式のメールフォームを作成し、コンテンツの途中の段階で送信が送れる仕組みを作成していたのだけれど、PHPでそのまま実装すると再読み込みが発生してしまい、再度コンテンツを読んでいた位置まで進める必要が出てきたので、Ajaxと組み合わせ実装した際の方法をメモ

HTML

<form action="" method="post" enctype="multipart/form-data" id="entryform">
<textarea name="text"></textarea>
<input type="file" name="newimage">
<button type="submit" id="submit">登録する</button>
</form>
<div id="result"></div>

jQuery

$(function(){
	$('form').on('submit', function(event) {
		event.preventDefault(); // フォームのデフォルト送信を防止
		var $form = $('#entryform');
		var formData = new FormData($form.get(0));
			
		$.ajax({
			type: 'POST',
			url: 'save.php',
			data: formData,
			processData: false,
			contentType: false,
			dataType: "json",
			success: function(response) {
				if (response.status === "success") {
					$("#result").html("アップロード成功");
				} else {
					$("#result").html("エラー: " + response.message);
				}
			},
			error: function() {
				$("#result").html("エラーが発生しました。");
			}
		});

	});
});

save.php（PHP）

if($_SERVER['REQUEST_METHOD'] === 'POST'){
	$uploadDir = "uploads/";
	$file = $_FILES["image"];
	$fileName = basename($file["name"]);
	$targetFile = $uploadDir.$fileName;

	$text = filter_input(INPUT_POST, "text", FILTER_SANITIZE_STRING);
	if (!$text) {
		echo json_encode(["status" => "error", "message" => "テキストが無効です"]);
		exit;
	}
	
	if (isset($_FILES["newimage"])) {
		$finfo = new finfo(FILEINFO_MIME_TYPE);
		$mimeType = $finfo->file($file["tmp_name"]);
		$validMimeTypes = ["image/jpeg", "image/png", "image/gif"];

		if (!in_array($mimeType, $validMimeTypes)) {
			echo json_encode(["status" => "error", "message" => "画像の種類が正しくありません"]);
			exit;
		}

		// 画像サイズの制限（2MB）
		if ($file["size"] > 2 * 1024 * 1024) {
			echo json_encode(["status" => "error", "message" => "画像サイズは2MB以下にしてください"]);
			exit;
		}

		// 画像を保存
		move_uploaded_file($file["tmp_name"], $targetFile);
	}
}