プログラムに関するメディア

phpで画像をアップロードする方法まとめ

今回はphpで画像をアップロードする方法を紹介します!

環境

  • macOS Mojave ver.10.14.5
  • PHP 7.1.23
  • XAMPP(mac) 7.3.3-1

XAMPPの設定確認

XAMPPでは、ファイルのアップロードに関係する設定が以下のファイルに記載されています。
/Applications/XAMPP/xamppfiles/etc/php.ini の883行目をみてみましょう。

upload_tmp_dir="/Applications/XAMPP/xamppfiles/temp/"

ファイルをアップロードした時に上記のディレクトリに保管される設定になっています。

tempとは?

XAMPPでアップロード先に指定されている、tempとは何でしょうか?

「temp」=「temporary (一時的な~)」の略であり、一時的に生成されたファイルをおく場所が「tempフォルダ」になります。

HTMLでファイルをアップロードした時、動作としてはHTMLからファイルがサーバーのtempフォルダに送られて、そこからスクリプトが終了するまでtempフォルダに保存され続けます。

ですが、スクリプトが終わったら一時ファイルにあるファイルは消えてしまうので、自分で画像ファイルを移動させる必要があります。

phpでファイルをアップロードする

ディレクトリ構成

今回、画像アップロードテスト用にXAMPPのhtdocs内に、新たにupload_testディレクトリを作成しました。
また、以下のような構成のファイル・フォルダをupload_testディレクトリ内に作成しました。

  • img_upload.php:アップロード実行ファイル
  • display.php:画像の表示ファイル
  • imgフォルダ:画像の保管場所(tempからの移動先)

アップロードファイルを作成

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において、

  • formタグ:methodはpostを選択する(getでは、画像ファイルのようにサイズの大きいものを送るには容量が小さくて足りないため)
  • formタグ:enctype=”multipart/form-data”をつける(フォームで送るデータ形式の指定)
  • inputタグ:type=”file”を指定する

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) } }

出力結果から、

  • $_FILES[‘image’][‘name’]に画像ファイル名
  • $_FILES[‘image’][‘tmp_name’]保管先のpath

がデータとして入っていることがわかります。

そのため、以下のようにソースコードを編集し、画像ファイルを移動させてみましょう。

<?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を表示すると、以下のようにアップロードした画像が表示されています。

まとめ

  • 画像ファイルのアップロード先は環境設定ファイルを確認する
  • アップロード先がtempディレクトリの場合、移動させる必要がある
  • アップロード情報はグローバル変数の$_FILESに入る
  • アップロードした画像を表示させる場合は、表示ファイルと画像ファイルの位置関係を意識してpathを指定する

以上、参考になれば幸いです!