見出し画像
Photo by mericanadesico

HTML,JavaScript,PHP 複数ファイルのアップロード機能実装

seiya_watanabe

複数ファイルのアップロード機能を実装したく、色んなサイトで調べて実装できました。簡単にまとめてみましたので、良ければ参考にしてください。

HTML部分


<body>
    <form method="post" enctype="multipart/form-data" action="up.php">
        <input multiple="multiple" name="up[]" type="file" id="article_image_file_name">
        <output id="list" class="clear"></output>
        <input type="submit" value="アップロード" onclick="return Check()">
    </form>
</body>

form要素でenctype="multipart/form-data"を指定しないとファイルのアップロードができません。input要素内のname属性を配列型にすることで、複数のファイルを選択することができます。

スクリプト部分

<script>
    document.getElementById('article_image_file_name').onchange = function(event){
        initializeFiles();

        var files = event.target.files;

        for (var i = 0, f; f = files[i]; i++) {
        var reader = new FileReader;
        reader.readAsDataURL(f);

        reader.onload = (function(theFile) {
            return function (e) {
            var div = document.createElement('div');
            div.className = 'reader_file';
            div.innerHTML = '<div class="reader_title">' + encodeURIComponent(theFile.name) + '</div>';
            div.innerHTML += '<img class="reader_image" src="' + e.target.result + '"/>';
            document.getElementById('list').insertBefore(div, null);
            }
        })(f);
        }
    };

    function initializeFiles() {
        document.getElementById('list').innerHTML = '';
    }

    function Check(){
        var checked = confirm("画像をアップロードします。よろしいですか？");
        if(checked == true){
            return true;
        }else{
            return false;
        }
    }
</script>

ファイルをアップロードする前の画像とファイル名を表示するスクリプト、確認ダイアログを表示するスクリプトです。

PHP部分

<?php
// ファイルがあれば処理実行
if(isset($_FILES["up"])){

  // アップロードされたファイル件を処理
  for($i = 0; $i < count($_FILES["up"]["name"]); $i++ ){

      // アップロードされたファイルか検査
      if(is_uploaded_file($_FILES["up"]["tmp_name"][$i])){

          // ファイルをお好みの場所に移動
          move_uploaded_file($_FILES["up"]["tmp_name"][$i], "./img/" . $_FILES["up"]["name"][$i]);

      }
  }
}
header('Location: http://localhost/sample/file.html');
exit();
?>

formのアクションから呼び出されて、指定場所のフォルダに1つずつ画像を格納していきます。すべてのファイルが格納されたら、header()で元のページにリダイレクトします。

以上です。
最後まで読んでいただきありがとうございました。

この記事が気に入ったらサポートをしてみませんか？