第3回「画像をアップロード」PHP・HTML5・jQuery・javascript・CSS
サンプル 動きます
下の画像はフリー素材なので、使ってみてください。
 |
サンプルページ：画像をアップロード
こんにちは。今回は画像のアップロードについて触れていきます。
かなりボリューム多めです。1時間くらいかけて、本当にゆっくり読んでください。
目次・具体的なコード（オープンソース） ・コードの説明 ・まとめ |
・具体的なコード（オープンソース）
「upload.php」と名前を付けて保存してください。
<?php
/* 画像がアップロードされたら立てるフラグを初期化。 */
$flg = 0;
/* メッセージ用変数を初期化。 */
$log_1 = "";
/* ファイルを選択し、submitボタンを押した際の処理。 */
/* POST でアップロードされたファイルかどうかを調べる。 */
if (is_uploaded_file($_FILES["upfile"]["tmp_name"])) {
/* 拡張子の取得。 */
$ext = pathinfo($_FILES["upfile"]["name"], PATHINFO_EXTENSION);
/* ファイルの保存先と保存名 */
$file_pass = "./img/mypage/test_id/" . $_FILES["upfile"]["name"];
/* ファイルの拡張子が「jpg」「jpeg」「png」「gif」か確認する */
if($ext != "jpg" AND $ext != "jpeg" AND $ext !="gif" AND $ext != "png" ){
/* 画像ファイルでなければ保存しません。 */
}else{
/* 画像ファイルです */
/* img/mypage/フォルダの中に各ユーザーidごとのフォルダを作ります。 */
$directory_path = "./img/mypage/test_id";
/* 既にユーザーidのフォルダが存在していた場合は、新たに作りません。 */
if(!is_dir($directory_path)){
/* フォルダがなかったので新しく作ります。 */
mkdir($directory_path, 0777, TRUE);
}else{
/* フォルダが既にあるので、新たには作りません。 */
}
/* 画像ファイルを保存 */
if (move_uploaded_file ($_FILES["upfile"]["tmp_name"], "./img/mypage/test_id/" . $_FILES["upfile"]["name"])) {
$log_1 = $_FILES["upfile"]["name"] . "をアップロードしました。";
$flg = 1;
} else {
$log_1 = "ファイルをアップロードできません。";
}
}
} else {
$log_1 = "画像ファイルを選択してください。";
}
?>
<?php /* HTML5の文書型宣言 */ ?>
<!DOCTYPE html>
<?php /* 「lang属性」でコードが何語か設定宣言 */ ?>
<html lang="ja">
<head>
<?php /* 文字エンコーディングの設定宣言 */ ?>
<meta charset="UTF-8">
<?php /* title宣言 */ ?>
<title>画像をアップロード</title>
<?php /* jquery ファイル読み込み宣言 */ ?>
<script src="https://code.jquery.com/jquery-2.0.0.js"></script>
</head>
<body>
<?php /* javascriptをブラウザが無効にしてる時だけ出る、注意文のモーダルウィンドウ */ ?>
<div id="modal-content_javascript_error">
<table>
<tr>
<td class="text-align-center">
<h2>エラー</h2>
<p>こちらのサイトはブラウザのjavascriptを有効にして利用してください。</p>
</td>
</tr>
</table>
</div>
<?php /*<!-- 2番目に表示されるモーダル（オーバーウエィ)半透明な膜 -->*/ ?>
<div id="modal-overlay" ></div>
<?php /* css */ ?>
<style>
<?php /* javascriptをブラウザが無効にしてる時だけ出るヘッダーのcss */ ?>
#modal-content_javascript_error{
<?php /* 幅・高さ */ ?>
width:300px;
height: 300px;
<?php /* ボックスの重なりの順序を指定 */ ?>
z-index:2;
<?php /* 背景の色 */ ?>
background-color: #ffffff;
<?php /* 位置の固定 */ ?>
position: fixed;
<?php /* 位置 */ ?>
top:30px;
left:0;
right:0;
<?php /* 角を丸くします。 */ ?>
border-radius: 20px;
}
<?php /* 2番目に表示させるdiv半透明の膜 */ ?>
#modal-overlay{
<?php /* ボックスの重なりの順序を指定 */ ?>
z-index:1;
<?php /* 位置の固定 */ ?>
position:fixed;
<?php /* 位置 */ ?>
top:0;
left:0;
<?php /* 幅・高さ */ ?>
width:100%;
height:100%;
<?php /* 背景の色（半透明） */ ?>
background-color:rgba(51,51,51,0.6);
<?php /* 外側の余白 */ ?>
margin-top:0px;
}
</style>
<?php /* javascriptをブラウザが無効にしてる時だけ出る、注意文のヘッダーは、下記のjavascriptが実行されれば、display要素をnoneにして非表示にします。 */ ?>
<script>
document.getElementById("modal-content_javascript_error").style.display = "none";
document.getElementById("modal-overlay").style.display = "none";
</script>
<div>
<h2><?php echo $log_1; ?></h2>
<form action="./upload.php" method="post" enctype="multipart/form-data">
<label>画像のアップロード（最大1MB）</label>
<?php /* ファイルの種類ば、accept要素で画像だけに指定します。 */ ?>
<p><input type="file" name="upfile" size="80px" id="upload" accept="image/*"></p>
<p><input type="submit" name="submit" value="Upload" /></p>
</form>
<?php /* jquery このファイルのみの処理なので、ここに書きます。 */ ?>
<script>
<?php /* ファイルを選択した時に、画像ファイル以外のファイルや、あまりにも大きいファイルの場合、選択を解除させます。 */ ?>
$("#upload").on("change", function() {
var file = $("#upload").prop("files")[0];
<?php /* ファイル名 alert(file.name); */ ?>
<?php /* ファイルの種類名 alert(file.type); */ ?>
<?php /* ファイルのサイズ（バイト） alert(file.size); */ ?>
<?php /* 「jpg」「jpeg」「png」「gif」以外のファイルを選択した場合、アラートで警告し、ファイル選択を解除します。 */ ?>
if(file.type != "image/gif" && file.type != "image/jpeg" && file.type != "image/jpg" && file.type != "image/png"){
alert("画像ファイルを選択してください。\n可能な拡張子は、「jpg」「jpeg」「png」「gif」です。");
$("#upload").val("");
}else if(file.size > 1048576 ){
<?php /* 1M以上のファイルを選択した場合、アラートで警告し、ファイル選択を解除します。 */ ?>
alert("ファイルが保存最大値を超えています。。\n1Mバイト以上のサイズはアップロードできません。");
$("#upload").val("");
}
});
</script>
<?php
/* 画像がアップロードされた時だけその画像を表示します。 */
if($flg==1){
?>
<p><?php echo $_FILES["upfile"]["name"]; ?></p>
<img class="img_upload" src='<?php echo "./img/mypage/test_id/" . $_FILES["upfile"]["name"]; ?>'>
<style>
.img_upload{
<?php /* 幅・高さ */ ?>
width:auto;
height:150px;
<?php /* 角を丸くします。 */ ?>
border-radius: 75px;
}
</style>
<?php
}
?>
</div>
</body>
</html>
同じ階層フォルダに「img」というフォルダを作成してください。
サーバーに上げて確認すると、下のようになります。
画像
 |
ブラウザで確認すると、アプロードした画像は、「img」フォルダの中の「/mypage/test_id/」というフォルダに保存されいます。
※どこに画像を保存するかは、次の「コードの説明」で詳しく書きます。
・コードの説明
129行目～135行目
<h2><?php echo $log_1; ?></h2> <form action="./upload.php" method="post" enctype="multipart/form-data"> <label>画像のアップロード（最大1MB）</label> <?php /* ファイルの種類ば、accept要素で画像だけに指定します。 */ ?> <p><input type="file" name="upfile" size="80px" id="upload" accept="image/*"></p> <p><input type="submit" name="submit" value="Upload" /></p> </form>
この<form></form>内で、画像を選択する処理をしています。
※超大事：formタグには下記の属性を必ずつけてください。
enctype="multipart/form-data"
先日、久しぶりに画像の仕事をした時、この属性を忘れていて、3時間位しらべました。
すでにやっていることなのですが、type=”file”を使う時は、この属性を付けないと、正常にデータが行き渡しできません。
ぜひ、お気を付けください。
<input type="file" name="upfile" size="80px" id="upload" accept="image/*">
・「type=”file”」と書くことで、ボタンを押した際に、エクスプローラーが表示され、ユーザー側でファイルを選択できるようになります。
・「name=”upfile”」は、「upload（submit)ボタン」を押したときに、ファイルは、「$_FILES[“upfile”]」変数に格納されます。その時のキー名です。
・「accept=”image/*”」は、選択するファイルを、画像ファイルのみに指定できます。（2018年1月時点では、Edeg以外のブラウザで対応しています。）
そして「Upload」ボタン（submit）を押すと、ページがリロードされ、1行目～46行目に書いたPHP文が実行されます。
8行目～10行目
/* ファイルを選択し、submitボタンを押した際の処理。 */
/* POST でアップロードされたファイルかどうかを調べる。 */
if (is_uploaded_file($_FILES["upfile"]["tmp_name"])) {
if文で条件分岐しています。
なんの条件かというと、「ファイルがアップロードされていて、一時保存ファイルとなっているか」という条件分岐をしています。
つまり、初めてこのページを開いた状態だと、まだファイルを選択してもいないし、アップロードボタンも押していないので、このif文には条件が合わず、42行目まで飛ばされます。
参考サイト：PHP $_FILES(ファイル変数)のすべて！【初心者向け基本】
今回は「uploadボタン（submit）」を押した処理の流れを見てくので、続きを見ていきます。
15行目～16行目
/* ファイルの保存先と保存名 */ $file_pass = "./img/mypage/test_id/" . $_FILES["upfile"]["name"];
ここでは、ファイルの保存フォルダと、保存ファイル名を指定しています。
保存フォルダを変えたい場合は、16行目・25行目・35行目・162行目の4か所に書かれている「./img/mypage/test_id/」の相対パスを、変えたい場所に書き換えてください。
ファイル名を変更する場合は、16行目の「$_FILES[“upfile”][“name”]」を、変更する名前に書き換えてください。
18行目～41行目
/* ファイルの拡張子が「jpg」「jpeg」「png」「gif」か確認する */
if($ext != "jpg" AND $ext != "jpeg" AND $ext !="gif" AND $ext != "png" ){
/* 画像ファイルでなければ保存しません。 */
}else{
/* 画像ファイルです */
/* img/mypage/フォルダの中に各ユーザーidごとのフォルダを作ります。 */
$directory_path = "./img/mypage/test_id";
/* 既にユーザーidのフォルダが存在していた場合は、新たに作りません。 */
if(!is_dir($directory_path)){
/* フォルダがなかったので新しく作ります。 */
mkdir($directory_path, 0777, TRUE);
}else{
/* フォルダが既にあるので、新たには作りません。 */
}
/* 画像ファイルを保存 */
if (move_uploaded_file ($_FILES["upfile"]["tmp_name"], "./img/mypage/test_id/" . $_FILES["upfile"]["name"])) {
$log_1 = $_FILES["upfile"]["name"] . "をアップロードしました。";
$flg = 1;
} else {
$log_1 = "ファイルをアップロードできません。";
}
}
長く書いていますが、処理は簡単です。
「アップロードされたファイルが画像ファイルか」
19行目、if文
↓そうだったら
「ファイルを保存する前に、「img」フォルダの中に「mypage/test_id/」と名前の付いたフォルダがあるか確かめる」なかったら作る。
27行目、if文
↓その後
「アップロードされたファイルを、指定場所に保存」
35行目「move_uploaded_file()関数」で保存しています。
これで、画像のファイルのアップロードができまました。
・・・と、思ったら間違いです💦💦💦💦
今回、気を付けたこと
・大きすぎるファイルをアップロードされたらどうするか
・画像ファイル以外は、アップロードされたくない
上の2つを「jQuery（javascript）」で、そもそも、そういうファイルは選択できないようにしました。137行目～153行目
そして、ブラウザ側で「javascript」をブロックしている場合は、エラーメッセージを表示して、「javascript」を有効にしないと、機能が使えに用にしました。
79行目～140行目
この機能を詳しく知りたい方は、以前、書きました 第1回「javascriptがブロックされている時にメッセージを出そう」 を見てみてください。
気になる方は、ブラウザの「設定」でjavascriptをブロックしてみてください。エラー文が表示されるはずです。
以上です。お疲れさまでした＾＾
次回は、アップロードした画像を「トリミング」（切り取り）してみましょう！
・まとめ
画像のアップロードって、いろんな方法があります。
正直、自分が初めて読んだ、PHPの参考書に書いてあった方法を、なんかにメモっとくのが一番よかったのかもしれません。
参考にさせて頂いてあれなんですが、やっぱ、ネットの記事って、そのプログラマーだけが解るように内容を書いている事が多いんですね。
結構、前の記事で、今の環境では動かないプログラムが書かれているサイトも多いです。
勉強するには、参考書や詳しい本を買うのが、一番いい方法なのでしょうね。
それでも、参考にさせて頂いたサイトの管理者様。いつも、ありがとうございます。
理解がとても深くなりました。
今回は以上です。お疲れさまでした。
今回の記事を書くにあたって参考にしたサイト
Web.fla「【PHP】画像ファイルのアップロードから削除までの流れ」
thinkit「PHPによるファイルアップロード処理のあれこれ」
dot-town-lab「アップロードした画像をPHPで保存するメモ」
ysklog「【PHP】画像ファイルかどうかを判別・確認する方法」
ysklog「【PHP】ディレクトリ（フォルダ）の存在を確認し、なければ作成する」
カキノタ：IT-Life「[PHP] mkdir() [function.mkdir]: File exists in…」
allabout「画像を使わずにCSSだけで角を丸くする方法」
qiita.com「CSSで中央寄せの方法いろいろメモ」
桶狭間情報システム「mkdirでフォルダを作成するとNo
such file or directoryエラーが発生する」
Eric Clapton Twitter
各サイトの管理者様、参考にさせて頂き、ありがとうございました。
Leave a comment