自分用: html5とphpを用いた複数ファイルのアップロード

タイトルのままの内容です。
html5ではinput要素にmultipleとつけると複数ファイルを簡単に選択出来て送信できます。
送信されたPHP側では、$_FILESという名前で一時保存されています。

参考サイト
JavaScript プログラミング講座
 たくあんのチラシ裏　HTML5+PHPで複数ファイルアップロード
 選択されたファイルの名前を取得する

あとは、accept="image/*"をinputの中に入れると画像だけ保存とか可能らしい

upload.html

<html>
	<head>
	</head>
	<body>
		<form action="upload.php" method="post" enctype="multipart/form-data">
			<input name="userfile[]" type="file" id="upfile" onChange="printfile()"  multiple><br>
			<input type="submit" value="Send">
		</form>
		<div id="result"></div>
		<script>
			function printfile(){
				var fileList = document.getElementById("upfile").files;
				var list = "";
				for(var i=0; i<fileList.length; i++){
				list += fileList[i].name + "<br>";
				}
				document.getElementById("result").innerHTML = list;
			}
		</script>
	</body>
</html>

upload.php

<?php
  for ($i=0; $i<count($_FILES['userfile']['name']); $i++) {
    $file_ext = pathinfo($_FILES["userfile"]["name"][$i], PATHINFO_EXTENSION);
    if (/*FileExtensionGetAllowUpload($file_ext) && */ is_uploaded_file($_FILES["userfile"]["tmp_name"][$i])) {
      if(move_uploaded_file($_FILES["userfile"]["tmp_name"][$i], "img/".$_FILES["userfile"]["name"][$i])) {
          echo $_FILES["userfile"]["name"][$i] . "をアップロードしました。<br>";
      } else {
        echo "ファイルをアップロードできません。<br>";
      }
    } else {
      echo "ファイルが選択されていません。<br>";
    }
  }
  //アップロードできるファイルに拡張子の制限をかけたい時
  function FileExtensionGetAllowUpload($ext){
    $allow_ext = array("gif","jpg","jpeg","png","eps");
    foreach($allow_ext as $v){
      if ($v === $ext){
        return 1;
      }
    }
    return 0;
  }
?>

要素名	解説
name	アップロードされたファイルの名前
type	アップロードされたファイルの MIME タイプ
size	アップロードされたファイルのサイズ
tmp_name	アップロードされたファイルが格納されている一時的なパス名
error	エラーが無ければ 0 、エラーがあれば 0 以外の数値