高度なフォーム処理
☆★データーでの確認★☆
ファイルをアップロードする
enctype 属性 file 属性 $_FILES move_upload_file 関数
- ファイルをアップロードするには、HTMLフォーム側のHTML文とそれを受け取る側のPHPスクリプトの両方で処理を行う必要がある。
- HTMLフォーム側のHTML文
<FORM>タグにおいて、enctype属性として「multipart/form-data」を指定する。また、アップロードするファイルを入力するテキストボックスで<INPUT>タグのtype属性に「file」を指定する。
これにより、Webブラウザでの実行時にはテキストボックスの右に「参照」ボタンが自動的に表示され、ファイル選択の画面を表示できるようになる。なお、アップロードされたファイルの情報を受け取り側のPHPスクリプトで認識できるよう、必ずこのテキストボックスには任意の名称のname属性を設定する。 - 受け取り側のPHPスクリプト
アップロード自体は、HTMLフォームのsubmitボタンのクリックで自動的に行われる。その後「$_FILES」というスーパーグローバル変数を使ってそのファイルの情報を取得し、必要に応じて、アップロードされたファイルの確認する。アップロードされたファイルはまだ一時的にサーバー上に置かれた状態なので、この後に世紀の位置へ移動する。
「$_FILES」変数は多次元の連想配列になっている。例えば、HTMLフォームのファイル名入力用テキストボックスのname属性が「uploadfile」となっている場合、以下のような記述によって、アップロードされたファイルの各種の情報を取得できる。
$_FILES[uploadfile][name] ⇒ ユーザーが指定した元のファイル名
$_FILES[uploadfile][size] ⇒ ファイルのサイズ(バイト)
$_FILES[uploadfile][tmp_name] ⇒ アップロード直後のテンポラリファイル名
- HTMLフォーム側のHTML文
- 下記の例ではファイルのアップロード後、以下のような処理を行っている。
アップロードされたファイル名の長さを確認する
この確認にはstrlen関数を使う。テキストボックスでファイルが指定されていない場合、この関数の返り値は「0」となるので、これを確認すればアップロードされたかを判別できる。- アップロードファイルのサイズや拡張子を確認する
この処理は必須ではなく、必要に応じて行う。 - テンポラリファイルを正規の場所に移動させる
アップロード後、テンポラリライブが一時停的にサーバー上に置かれるので、move_uploaded_file 関数を使って正規の場所に移動させる。この関数は、第1引数に指定した「アップロードテンポラリファイル」を第2引数の「ディレクトリ+ファイル名」へ移動させる。必要ならば、ここでファイルのリネームもできる。
なお、移動先に同名ファイルがある場合、エラーなどは発生せずに強制的に上書きされる。同じ名前のファイルがアップロードされる可能性がある場合は、保存日時のタイムスタンプを付加してユニークなファイル名にするなどの処置が必要。
【 書式 】
<?php if (isset($_POST[btnExec])) { // 実行ボタンがクリックされたとき if(strlen($_FILES[uploadfile][name]) > 0) { // 画像ファイルがアップロードされたとき // アップロードされたファイルの情報を取得 $fileinfo = pathinfo($_FILES[uploadfile][name]); // ファイルの拡張子を取得して大文字に変換 $fileext = strtoupper($fileinfo[extension]); if ($_FILES[uploadfile][size] > 102400) { // アップロードファイルのサイズ上限を確認 $errmsg .= "ファイルサイズが大きすぎる。100kb以下にしてください。<br>"; } elseif ($_FILES[uploadfile][size] == 0) { // アップロードファイルのサイズ下限を確認 $errmsg .= "ファイルが存在しないか空のファイル。<br>"; } elseif ($fileext != "GIF" and $fileext != "JPG") { // アップロードファイルの拡張子を確認 $errmsg .= "対象ファイルはGIFまたはJPGです。<br>"; } else { // アップロードされたファイルを正規に配置するパスを設定 // ここではimagesディレクトリの下に”upf_” + 元の名前で配置 $movetofile = "images/upf_" . $_FILES[uploadfile][name]; // アップロードされたテンポラリファイルを正規の場所に移動 if (! move_uploaded_file($_FILES[uploadfile][tmp_name], $movetofile)) { $errmsg .= "ファイルのアップロードに失敗した。<br>"; } } if ($errmsg == "") { // 正常にアップロードされたときはその画像を表示 print $_FILES[uploadfile][name] . "<br>"; print "<img src='$movetofile'><br><br><br>"; } else { // いずれかのエラーがあったとき // エラーメッセージを表示 print $errmsg . "<br><br><br>"; // アップロードされたテンポラリファイルを削除j @unlink($_FILES[uploadfile][tmp_name]); } } else { print "アップロードするファイルが指定されていない。<br><br><br>"; } } ?>
ソースコード
ソースコード【 HTML 】
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <title>webサイト開発 | PHPサンプルサイト</title> <link href="../css/reset.css" rel="stylesheet" type="text/css" media="screen"> <!-- CSS for slidesjs.com example --> <link rel="stylesheet" href="../css/example.css"> <link rel="stylesheet" href="../css/font-awesome.min.css"> <!-- End CSS for slidesjs.com example --> <link rel="stylesheet" href="../css/embet.css"> <link href="../css/common.css" rel="stylesheet" type="text/css" media="screen"> <link href="../css/page.css" rel="stylesheet" type="text/css" media="screen"> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function($) { //****************************************** //クリックによる開閉 //****************************************** //基本的に、ページ内のどこをクリックしても全てのサブメニューを閉じるようにしておく。 $(document).click(function() { $('#main_menu > li > ul').slideUp() }); $('#main_menu > li').click(function(ev){ var sub = $(this).children('ul'); if ($(sub).is(':hidden')) { //今回は、これからサブメニューを開きたい項目をクリックしているので、 //上記の、全てのサブメニューを閉じるイベントを発火させてはならない。 //よって、イベントのバブリングを中止する。 ev.stopPropagation(); //他に開いているサブメニューを閉じる。 //開いたままでもよければ、下の1行は必要ない。 $('#main_menu > li > ul:visible').slideUp(); $(sub).slideDown(); } }); //クリックによる開閉の場合、親メニューの"a"要素の機能は必要ないので無効にする。 $('#main_menu > li > a').click(function(ev) { ev.preventDefault() }); }); </script> <script type="text/javascript"> jQuery(document).ready(function($) { //****************************************** //クリックによる開閉 //****************************************** //基本的に、ページ内のどこをクリックしても全てのサブメニューを閉じるようにしておく。 $(document).click(function() { $('#main_menu > li > ul').slideUp() }); $('#main_menu > li').click(function(ev){ var sub = $(this).children('ul'); if ($(sub).is(':hidden')) { //今回は、これからサブメニューを開きたい項目をクリックしているので、 //上記の、全てのサブメニューを閉じるイベントを発火させてはならない。 //よって、イベントのバブリングを中止する。 ev.stopPropagation(); //他に開いているサブメニューを閉じる。 //開いたままでもよければ、下の1行は必要ない。 $('#main_menu > li > ul:visible').slideUp(); $(sub).slideDown(); } }); //クリックによる開閉の場合、親メニューの"a"要素の機能は必要ないので無効にする。 $('#main_menu > li > a').click(function(ev) { ev.preventDefault() }); }); </script> <script type="text/javascript"> jQuery(document).ready(function($) { //****************************************** //クリックによる開閉 //****************************************** //基本的に、ページ内のどこをクリックしても全てのサブメニューを閉じるようにしておく。 $(document).click(function() { $('#list_menu > li > ul').slideUp() }); $('#list_menu > li').click(function(ev){ var sub = $(this).children('ul'); if ($(sub).is(':hidden')) { //今回は、これからサブメニューを開きたい項目をクリックしているので、 //上記の、全てのサブメニューを閉じるイベントを発火させてはならない。 //よって、イベントのバブリングを中止する。 ev.stopPropagation(); //他に開いているサブメニューを閉じる。 //開いたままでもよければ、下の1行は必要ない。 $('#list_menu > li > ul:visible').slideUp(); $(sub).slideDown(); } }); //クリックによる開閉の場合、親メニューの"a"要素の機能は必要ないので無効にする。 $('#main_menu > li > a').click(function(ev) { ev.preventDefault() }); }); </script> <style type="text/css"> #main_menu > li > ul { display:none; padding: 10px 10px 5px; background: rgba(169, 169, 170, 1.0); cursor: pointer!important; } </style> </head> <body> <!--▽#container--> <div id="container"> <header class="clearfix"> <h1><a href="../index.html"><img src="../images/logo.png" width="75" alt=""></a><span>webサイト開発 | PHPサンプルサイト</span></h1> <!--▽#menu--> <ul id="main_menu"> <li><a href=""><img src="../images/menu.png" width="38px" alt=""></a> <ul class="menu_home"> <li><span class="menu_title">HOME</span> <li><a href="#top">TOP</a></li> </li></ul> <ul class="menu_link"> <li><span class="menu_title">LINK</span> <li><a href="http://d.hatena.ne.jp/webry/">実践するWEBサイト制作 | webnote</a></li> <li><a href="http://webry.dousetsu.com/images_deta/">はてなデーターの保管庫 | webrynote</a></li> <li><a href="http://webrynote.jimdo.com/"></a>動画で確認するscript | FlashとJavaScrip</li> <li><a href="http://webry.dousetsu.com/"></a>実践でカフェオレを俺流においしく作るサイト | カフェ俺流に作る</li> </li></ul> <ul class="menu_sns"> <li><span class="menu_title">SNS</span> <li><a href="https://twitter.com/webrynote">Twitter</a></li> <li><a href="https://www.facebook.com/note.webry">Facebook.</a></li> <li><a href="http://webry.tumblr.com/">Tumblr</a></li> </li></ul> </li> </ul> </header> <!--▽.content--> <div class="content"> <!--▽.col1--> <section class="col1"> <h2>高度なフォーム処理</h2> </section><!--▲.col1--> <!--▽.content_inner--> <div class="content_inner"> <section class="col2"> <section id="post01" class="col2-1 post"> <a href="#post01"><h2><span class="ita">1-1 </span>ファイルをアップロードする</h2></a> <div class="post_inner"> <p class="p_point"><span class="point">point </span>enctype 属性 file 属性 $_FILES move_upload_file 関数</p> <ul class="list01"> <li>ファイルをアップロードするには、HTMLフォーム側のHTML文とそれを受け取る側のPHPスクリプトの両方で処理を行う必要がある。 <ul><li><span class="b">●HTMLフォーム側のHTML文</span><br> <FORM>タグにおいて、enctype属性として「multipart/form-data」を指定する。また、アップロードするファイルを入力するテキストボックスで<INPUT>タグのtype属性に「file」を指定する。<br> これにより、Webブラウザでの実行時にはテキストボックスの右に「参照」ボタンが自動的に表示され、ファイル選択の画面を表示できるようになる。なお、アップロードされたファイルの情報を受け取り側のPHPスクリプトで認識できるよう、必ずこのテキストボックスには任意の名称のname属性を設定する。</li> <li><span class="b">●受け取り側のPHPスクリプト</span><br> アップロード自体は、HTMLフォームのsubmitボタンのクリックで自動的に行われる。その後「$_FILES」というスーパーグローバル変数を使ってそのファイルの情報を取得し、必要に応じて、アップロードされたファイルの確認する。アップロードされたファイルはまだ一時的にサーバー上に置かれた状態なので、この後に世紀の位置へ移動する。<br> 「$_FILES」変数は多次元の連想配列になっている。例えば、HTMLフォームのファイル名入力用テキストボックスのname属性が「uploadfile」となっている場合、以下のような記述によって、アップロードされたファイルの各種の情報を取得できる。<br> <span class="b">$_FILES[uploadfile][name] ⇒ ユーザーが指定した元のファイル名<br> $_FILES[uploadfile][size] ⇒ ファイルのサイズ(バイト)<br> $_FILES[uploadfile][tmp_name] ⇒ アップロード直後のテンポラリファイル名</span></li></ul></li> </ul> <ul>下記の例ではファイルのアップロード後、以下のような処理を行っている。 <li><ul><li> <span classs="b">●アップロードされたファイル名の長さを確認する<br> この確認にはstrlen関数を使う。テキストボックスでファイルが指定されていない場合、この関数の返り値は「0」となるので、これを確認すればアップロードされたかを判別できる。</span></li> <li><span class="b">●アップロードファイルのサイズや拡張子を確認する</span><br> この処理は必須ではなく、必要に応じて行う。</li> <li><span class="b">●テンポラリファイルを正規の場所に移動させる</span><br> アップロード後、テンポラリライブが一時停的にサーバー上に置かれるので、move_uploaded_file 関数を使って正規の場所に移動させる。この関数は、第1引数に指定した「アップロードテンポラリファイル」を第2引数の「ディレクトリ+ファイル名」へ移動させる。必要ならば、ここでファイルのリネームもできる。<br> なお、移動先に同名ファイルがある場合、エラーなどは発生せずに強制的に上書きされる。同じ名前のファイルがアップロードされる可能性がある場合は、保存日時のタイムスタンプを付加してユニークなファイル名にするなどの処置が必要。</li></ul></li> </ul> </div> </section><!--▲.col2-1--> <section class="col-code"> <div id="post02" class="post"> <a href="#post02"><h2><span>PHPのコードを表示</span></h2></a> <div class="post_inner"> <div class="inner"> <pre> <code> <?php if (isset($_POST[btnExec])) { // 実行ボタンがクリックされたとき if(strlen($_FILES[uploadfile][name]) > 0) { // 画像ファイルがアップロードされたとき // アップロードされたファイルの情報を取得 $fileinfo = pathinfo($_FILES[uploadfile][name]); // ファイルの拡張子を取得して大文字に変換 $fileext = strtoupper($fileinfo[extension]); if ($_FILES[uploadfile][size] > 102400) { // アップロードファイルのサイズ上限を確認 $errmsg .= "ファイルサイズが大きすぎる。100kb以下にしてください。<?br>"; } elseif ($_FILES[uploadfile][size] == 0) { // アップロードファイルのサイズ下限を確認 $errmsg .= "ファイルが存在しないか空のファイル。<?br>"; } elseif ($fileext != "GIF" and $fileext != "JPG") { // アップロードファイルの拡張子を確認 $errmsg .= "対象ファイルはGIFまたはJPGです。<?br>"; } else { // アップロードされたファイルを正規に配置するパスを設定 // ここではimagesディレクトリの下に”upf_” + 元の名前で配置 $movetofile = "images/upf_" . $_FILES[uploadfile][name]; // アップロードされたテンポラリファイルを正規の場所に移動 if (! move_uploaded_file($_FILES[uploadfile][tmp_name], $movetofile)) { $errmsg .= "ファイルのアップロードに失敗した。<?br>"; } } if ($errmsg == "") { // 正常にアップロードされたときはその画像を表示 print $_FILES[uploadfile][name] . "<?br>"; print "<?img src='$movetofile'><?br><?br><?br>"; } else { // いずれかのエラーがあったとき // エラーメッセージを表示 print $errmsg . "<?br><?br><?br>"; // アップロードされたテンポラリファイルを削除j @unlink($_FILES[uploadfile][tmp_name]); } } else { print "アップロードするファイルが指定されていない。<?br><?br><?br>"; } } ?> </code> </pre> </div> </div> </div> </section> <section class="col2"> <div id="post03" class="post"> <a href="#post03"><h2><span>PHPでの表示</span></h2></a> <div class="post_inner"> <div class="inner"> <div class="php wd_wrap"> <?php if (isset($_POST[btnExec])) { // 実行ボタンがクリックされたとき if(strlen($_FILES[uploadfile][name]) > 0) { // 画像ファイルがアップロードされたとき // アップロードされたファイルの情報を取得 $fileinfo = pathinfo($_FILES[uploadfile][name]); // ファイルの拡張子を取得して大文字に変換 $fileext = strtoupper($fileinfo[extension]); if ($_FILES[uploadfile][size] > 102400) { // アップロードファイルのサイズ上限を確認 $errmsg .= "ファイルサイズが大きすぎる。100kb以下にしてください。<br>"; } elseif ($_FILES[uploadfile][size] == 0) { // アップロードファイルのサイズ下限を確認 $errmsg .= "ファイルが存在しないか空のファイル。<br>"; } elseif ($fileext != "GIF" and $fileext != "JPG") { // アップロードファイルの拡張子を確認 $errmsg .= "対象ファイルはGIFまたはJPGです。<br>"; } else { // アップロードされたファイルを正規に配置するパスを設定 // ここではimagesディレクトリの下に”upf_” + 元の名前で配置 $movetofile = "images/upf_" . $_FILES[uploadfile][name]; // アップロードされたテンポラリファイルを正規の場所に移動 if (! move_uploaded_file($_FILES[uploadfile][tmp_name], $movetofile)) { $errmsg .= "ファイルのアップロードに失敗した。<br>"; } } if ($errmsg == "") { // 正常にアップロードされたときはその画像を表示 print $_FILES[uploadfile][name] . "<br>"; print "<img src='$movetofile'><br><br><br>"; } else { // いずれかのエラーがあったとき // エラーメッセージを表示 print $errmsg . "<br><br><br>"; // アップロードされたテンポラリファイルを削除j @unlink($_FILES[uploadfile][tmp_name]); } } else { print "アップロードするファイルが指定されていない。<br><br><br>"; } } ?> <ul class="maru"> <li>ファイルのアップロードに関して、「php.ini」ファイルにいくつかの設定項目がある。 <ul class="none"> <li>file_uploads = On ⇒アップロード処理を有効にする。デフォルトはOn</li> <li>upload_tmp_dir = ⇒テンポラリファイルの保存ディレクトリを設定。デフォルメはコメントアウト</li> <li>upload_max_filesize = 2M ⇒アップロードを許可する最大量。デフォルトは2M</li> </ul></li> </ul> </p> </div> </div> </div> </div> </section> <section class="col2"> <div id="post04" class="post"> <a href="#post04"><h2><span>FORMでの入力</span></h2></a> <div class="post_inner"> <div class="inner"> <div> <p>アップロードする画像ファイルを指定して[ 実行 ]ボタンをクリック</p> <form action="1-1.php" method="POST" enctype="multipart/form-data"> <input size="40" type="file" name="uploadfile"> <input type="submit" name="btnExec" value="実行"> </form> </div> </div> </div> </div> </section> <p class="c_top"><a href="../index.html#13">▲ カテゴリートップへ戻る</a></p> <section class="bottom clearfix"> <a href="#"><p class="page_top">TOP</p></a> <div class="share_box"> <p><span>このサイトをシェアする</span> <a href="https://twitter.com/share" class="twitter-share-button" data-via="webrynote">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script><br> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script></p> </div> </section><!--▲.bottom--> </section><!--▲.content--> <footer> <ul> <li><a href="http://d.hatena.ne.jp/webry/">実践するWEBサイト制作 | webnote</a></li> <li><a href="http://webry.dousetsu.com/images_deta/">はてなデーターの保管庫 | webrynote</a></li> <li><a href="http://webrynote.jimdo.com/">動画で確認するscript | FlashとJavaScrip</a></li> <li><a href="http://webry.dousetsu.com/">実践でカフェオレを俺流においしく作るサイト | カフェ俺流に作る</a></li> <li><a href="https://twitter.com/webrynote">Twitter</a></li> <li><a href="https://www.facebook.com/note.webry">Facebook.</a></li> <li><a href="http://webry.tumblr.com/">Tumblr</a></li> </ul> <address>Copyright © 2014 webry - 『 webサイト開発 | PHPサンプルサイト 』 All Rights Reserved.</address> </footer> </div><!--▲.content_inner--> </div><!--▲#container--> </body> </html>
追加された外部ファイル
- page.css