search
LoginSignup
18

More than 5 years have passed since last update.

posted at

updated at

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

自分用: 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 以外の数値

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
18