[Work/Class/ES2015で動的Webアプリ/es2015_basic]

HTML5とPHPを用いた画像のアップローダ / 2018-06-29 (金)

HTML5のメディアアップロード機能

HTML5はメディアのアップロード機能を持っており,formの中で

<input type="file" />

とすることで,簡単にPC内やスマホに格納されている画像やムービーをアップロードできる.

サーバ側のプログラムは,PHPが一番簡単で,常駐プロセスを起動する必要がないため,多くのレンタルサーバに設置することができるので,これを用いる.

サンプル

HTML側

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>画像ファイルアップロードのサンプル</title>
</head>
<body>
<!-- サーバ側のプログラムのパスを書いておく.今回はHTMLファイルと同じ階層にあるPHP -->
<form action="file_uploader.php" method="post" enctype="multipart/form-data">
  <p>
    <input name="userfile[]" type="file" accept="image/*" id="upfile" onChange="printFile()"/>
    <!-- accept="image/*" というのは,画像ファイルのみを受け付けるという意味 -->
    <!-- onChange はサブミットされた時に実行する関数を書いておく.このサンプルでは下のprintFile関数 -->
  </p>
  <p>
    <input type="submit" name="send" value="アップロード" />
  </p>
</form>
 
<div id="result">
    <p>
      アップロードで選択されたファイル
    </p>
</div>
<script>
  // 単純にアップロードするファイル名を表示するだけ
  function printFile(){
      let fileList = document.getElementById("upfile").files;
      let list = "";
      for(let i=0; i<fileList.length; i++){
	  list += fileList[i].name + "<br />";
      }
      document.getElementById("result").innerHTML = list;
  }
</script>
</body>
</html>

PHP(サーバ)側

<?php
// 複数アップロード可能なので,for文で回す
for ($i=0; $i<count($_FILES['userfile']['name']); $i++) {
    // ファイル名を取得
    $file_ext = pathinfo($_FILES["userfile"]["name"][$i], PATHINFO_EXTENSION);

    if (is_uploaded_file($_FILES["userfile"]["tmp_name"][$i])) {
       // ファイル名が重複しないようにアップロードした日時をファイル名につけて,
       // HTML5とApache標準の仮のアップロード場所から,
       // 実際の保存場所にファイルを移動させる
       // このプログラムでは,htmlとphpが置いてあるフォルダの中のimgフォルダに保存する

       // 日時の取得       
       $uploaded_date = date("YmdHis");
       // もしちゃんとアップロードされていたら,
       // 移動して,中括弧の中を実行する
       if(move_uploaded_file($_FILES["userfile"]["tmp_name"][$i], "img/" . $uploaded_date . "_" . $_FILES["userfile"]["name"][$i])){
          // アップロードされたことを表示する
          echo "<p>" . $uploaded_date . $_FILES["userfile"]["name"][$i] . "をアップロードしました.<p>";

	  // アップロードしたファイルのパーミッションをいじれるようにする
	  // Webサーバプログラムがオーナーになっているので,
	  // ユーザが消せるように777
	  chmod("img/" . $uploaded_date . "_" . $_FILES["userfile"]["name"][$i],0777);

	  // img以下の画像ファイルを検索して表示
	  echo '<p>現在までアップロードされたファイル一覧</p>';
	  foreach(glob('img/{*.gif,*.jpg,*.jpeg,*.png,*.tif,*.tif}',GLOB_BRACE) as $file){
	     if(is_file($file)){
		echo htmlspecialchars($file) . '<br />';
	     }
	  }


	  // アップローダのhtmlに戻る表示
    	  echo "<p><a href='./file_uploader.html'>アップローダへ戻る</a></p>";				      
      } else {
      	  echo "<p>ファイルをアップロードできませんでした.</p>";
      }
    } else {
      echo "<p>ファイルが選択されていません.</p>";
    }
}
?>

参考サイト Qiita @kiryuumomoka 自分用: html5とphpを用いた複数ファイルのアップロード