Zenn
🌊

【初心者向け】フォームを利用したファイルアップロードの実装

2021/02/20に公開
Bootstrap
HTML
PHP
tech

概要

この記事では、フォームで選択したファイルをサーバーへアップロードする機能を実装する方法を解説します。
PHPの公式ページにあるものを参考にしているので、とてもシンプルなものになっています。

フォームの操作イメージ

参考サイト

利用イメージ

  • ゲーム等でユーザーがローカルに持っている画像ファイルを利用できる様にする
  • 企業の社内システムで書類のアップロードによるファイル共有機能を利用できる様にする

コード

FileUpload
├ upload
├ index.html
└ send.php

index.html
<!doctype html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>FileUploader</title>
</head>
<body>
	<!-- データのエンコード方式である enctype は、必ず以下のようにしなければなりません -->
	<form enctype="multipart/form-data" action="send.php" method="POST">

		<!-- MAX_FILE_SIZE は、必ず "file" input フィールドより前になければなりません -->
		<input type="hidden" name="MAX_FILE_SIZE" value="2097152" />

		<!-- input 要素の name 属性の値が、$_FILES 配列のキーになります -->
		このファイルをアップロード: <input name="userfile" type="file" />

		<input type="submit" value="ファイルを送信" />
	</form>
</body>
</html>
send.php
<?php
//実際に存在するフォルダ名を指定しなければエラーになります。
//send.phpファイルからの相対Path
$uploaddir = './upload/';
$uploadfile = $uploaddir . basename($_FILES['userfile']['name']);

echo '<pre>';
if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
    echo "<p>ファイルの送信に成功しました。</p>";
} else {
    echo "<p>ファイルの送信に失敗しました。</p>";
}

echo 'デバッグ情報:';
print_r($_FILES);
echo "</pre>";
?>

解説

  • index.htmlに記述している<input type="hidden" name="MAX_FILE_SIZE" value="2097152" />で送信可能な最大ファイルサイズを指定しています。
    ここでは、2MB = 2 * 1,024 * 1,024 = 2,097,152 byteで計算しています。
  • send.phpに記述している$uploaddirで指定したサーバー側のフォルダに、アップロードしたファイルが保存されていきます。
  • ファイル送信に成功／失敗した時のメッセージが公式のままだと分かりづらかった為、日本語表記に変更しています。

応用 - bootstrap

bootstrapを使って、以下の様なフォームになります。

bootstrap.html
<!doctype html>
<html lang="ja">
<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- Bootstrap CSS -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
	<title>FileUploader</title>
</head>
<body>
	<div class="container">
		<!-- データのエンコード方式である enctype は、必ず以下のようにしなければなりません -->
		<form class="m-3" enctype="multipart/form-data" action="send.php" method="POST">
			<!-- MAX_FILE_SIZE は、必ず "file" input フィールドより前になければなりません -->
			<input type="hidden" name="MAX_FILE_SIZE" value="2097152">
			<!-- input 要素の name 属性の値が、$_FILES 配列のキーになります -->
			<div class="d-flex mb-3">
				<input class="form-control me-3" name="userfile" type="file" id="formFile">
				<input class="btn btn-success" type="submit" value="送信">
			</div>
		</form>
	</div>
</body>
</html>

Discussion