今回はphpで画像をアップロードする方法を紹介します!
XAMPPでは、ファイルのアップロードに関係する設定が以下のファイルに記載されています。
/Applications/XAMPP/xamppfiles/etc/php.ini の883行目をみてみましょう。
upload_tmp_dir="/Applications/XAMPP/xamppfiles/temp/"
ファイルをアップロードした時に上記のディレクトリに保管される設定になっています。
XAMPPでアップロード先に指定されている、tempとは何でしょうか?
「temp」=「temporary (一時的な~)」の略であり、一時的に生成されたファイルをおく場所が「tempフォルダ」になります。
HTMLでファイルをアップロードした時、動作としてはHTMLからファイルがサーバーのtempフォルダに送られて、そこからスクリプトが終了するまでtempフォルダに保存され続けます。
ですが、スクリプトが終わったら一時ファイルにあるファイルは消えてしまうので、自分で画像ファイルを移動させる必要があります。
今回、画像アップロードテスト用にXAMPPのhtdocs内に、新たにupload_testディレクトリを作成しました。
また、以下のような構成のファイル・フォルダをupload_testディレクトリ内に作成しました。
img_upload.phpに以下のようなコードを書いていきます。
<?php if(isset($_POST["send"])) { var_dump($_FILES);exit; } ?> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>画像アップロード</h1> <form action="" method="post" enctype="multipart/form-data"> 画像<br> <input type="file" name="image"><br> <input type="submit" value="画像アップロード" name="send"> </form> </body> </html>
以上のように、ポイントとしては、HTMLにおいて、
submit(画像アップロード)が押されるとグローバル変数である、$_FILESに情報が入ります。
どのような情報が入っているのかvar_dump($_FILES)で見てみましょう!
出力結果
array(1) { ["image"]=> array(5) { ["name"]=> string(8) "logo.png" ["type"]=> string(9) "image/png" ["tmp_name"]=> string(45) "/Applications/XAMPP/xamppfiles/temp/phpC7mzwY" ["error"]=> int(0) ["size"]=> int(5152) } }
出力結果から、
がデータとして入っていることがわかります。
そのため、以下のようにソースコードを編集し、画像ファイルを移動させてみましょう。
<?php if(isset($_POST["send"])) { $tempfile = $_FILES['image']['tmp_name']; //アップロード画像の移動先 $filemove = '/Applications/XAMPP/xamppfiles/htdocs/upload_test/img/' . $_FILES['image']['name']; //move_uploaded_file関数を使って、アップロードした画像を指定した場所に移動させる move_uploaded_file($tempfile , $filemove ); } ?> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>画像アップロード</h1> <form action="" method="post" enctype="multipart/form-data"> 画像<br> <input type="file" name="image"><br> <input type="submit" value="画像アップロード" name="send"> </form> </body> </html>
注意点として、移動先に指定したディレクトリのパーミッション(権限)を777に変更しておいて下さい。
また、move_uploaded_file関数の第二引数は、ファイル名までを含めたフルパスを指定する必要があります。
submitボタンを押すと、以下のようにimgディレクトリに画像ファイルが移動することがわかります。
アップロードした画像の表示用ファイルであるdisplay.phpに以下のコードを書いてみて下さい。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>画像表示</h1> <img src="img/logo.png"> </body> </html>
ポイントはimgダグ内で指定する画像のpathです。相対パスで書いています。
今回はディレクトリ構成が単純なので、短い相対パスですが、複雑な構成でも表示できるように練習しておきましょう。
display.phpを表示すると、以下のようにアップロードした画像が表示されています。
以上、参考になれば幸いです!