【ajax php】複数選択したファイルを別々のフォルダにアップする方法

Question

ajaxでファイルのアップロードシステムを作っています。

1ファイルずつをフォルダ分けしてアップロードすることはできています。

例えばこのような感じです。

aファイルを選択、アップロードボタンクリック、Aフォルダへアップロード　完了
次に
bファイルを選択、アップロードボタンクリック、Bフォルダへアップロード　完了

これを

aファイル選択、bファイル選択、1つのアップロードボタンクリックでaファイルはAフォルダへ、bファイルはBフォルダへアップしたいと思っています。

ajaxをループで回すなども考えたのですがうまく考えがまとまりません。

実現するために考えられる方法をご教示いただければと思います。

Answer 1

どのフォルダにアップされるかはサーバー側の仕様ですから
適当な目印を一緒におくってあげてそれを使って
サーバーサイドで振り分ければいいでしょう

formが別れている場合

formのatcionで処理を分ける

• x.html

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $('#btn').on('click',function(){
    $('[type=file]').each(function(){;
      var fd = new FormData();
      var name=$(this).attr('name');
      var action=$(this).closest('form').attr('action');
      var file=$(this).prop('files')[0];
      var fr = new FileReader();
      fr.addEventListener("load", function(e){
        fd.append(name, new Blob([e.target.result],{"type":file.type}),file.name );
        $.ajax({
          "url":action,
          "type":"post",
          "data":fd,
          "cache":false,
          "processData": false,
          "contentType": false,
        }).done(function(data){
          console.log(data);
        });
      });
      fr.readAsArrayBuffer(file);
    });
  });
});
</script>
<form method="post" action="y.php" enctype="multmultipart/form-data">
<input type="file" name="a"><br>
</form>
<form method="post" action="z.php" enctype="multmultipart/form-data">
<input type="file" name="b"><br>
</form>
<input type="button" value="send" id="btn"><br>

• y.php

<?PHP
print_r($_FILES);

• z.php

<?PHP
print_r($_FILES);

一つのformから

• x.html

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $('#btn').on('click',function(){
    var fd = new FormData();
    var defs=[];
    $(this).closest('form').find('[type=file]').each(function(){;
      var name=$(this).attr('name');
      var def=$.Deferred();
      var file=$(this).prop('files')[0];
      var fr = new FileReader();
      fr.addEventListener("load", function(e){
        fd.append(name, new Blob([e.target.result],{"type":file.type}),file.name );
        return def.resolve();
      });
      fr.readAsArrayBuffer(file);
      defs.push(def.promise());
    });
    $.when.apply(null,defs).then(function(){
      $.ajax({
        "url":"y.php", //とりあえず決め打ち
        "type":"post",
        "data":fd,
        "cache":false,
        "processData": false,
        "contentType": false,
      }).done(function(data){
        console.log(data);
      });
    });
  });
});
</script>
<form method="post">
<input type="file" name="a"><br>
<input type="file" name="b"><br>
<input type="button" value="send" id="btn"><br>
</form>

• y.php

<?PHP
print_r($_FILES);

Comments

[Hmurakami]

今は
form→ajax→php　これは問題ありません。
※formでフォルダ名になる要素を持たせています。

複数のformがありまして。
ボタンを1つ押します。

そうすると

formの数だけform→ajax→phpを繰り返してくれれば良いのですが・・・。

[yambejp]

複数のformがあって、それぞれが送り先が違うということですか？
であれば繰り返し処理ですね
一つのformにtype=fileが複数あるならなにかフォルダをわけるための
キーが必要になります

[yambejp]

一応２種類サンプルあげておきました
aでおくられてくるか、bでおくられてくるかで判断できそうな気がしますね

[Hmurakami]

ありがとうございます！
大変参考になりました！
先に記述していただいたformが分かれているバージョンがほぼ近いカタチです。

やはりactionで分けるしか無いのでしょうか？

formの数は任意なのでy.phpやz.phpの準備の方法を考えれば行けそうです。

[yambejp]

actionを参照したのはformが別れている場合手っ取り早いからです
飛び先は任意にリストをつくっておいて参照すれば大丈夫です

Answer 2

質問の内容からは、つまづいている箇所がjavascript部分（クライアントサイド）か、php部分（サーバサイド）か、読み取れませんでした。

jqueryを使ってよければ、
jQuery-File-Upload
を使用するのはいかがでしょうか。リンク先にphpのサーバサイドのサンプルもあります。

Comments

[Hmurakami]

仕組みとしてアップロードはできております。

ajax部分とかphp部分とかではなくて

1つのボタンをクリックするとformの内容をajaxで受けてphpにpostをformの数だけループさせたいのです。

[EuphoryX1]

formの数だけ ということは、aファイル、bファイル それぞれに<form>(aファイル選択)(ボタン)</form>が存在しておりますでしょうか。これを<form>(aファイル選択)(bファイル選択)(ボタン)</form>のようにまとめることは可能でしょうか。

[Hmurakami]

<form>(aファイル選択)(bファイル選択)(ボタン)</form>
にすることで実現可能であればそれでも大丈夫でございます。

[EuphoryX1]

https://code.i-harness.com/ja/q/1266e02
が参考になると思います。<form enctype="multipart/form-data" method="post">を指定しています。これが複数ファイルには必要です。リンク先ではファイル追加ボタンで <input name="file[]" type="file" />を動的に追加していますが、ここが固定(a,b各inputタグ)になり、"ajaxアップロード用"を参考にFormDataに複数ファイルをappendするようなjavascriptを作成、$.ajaxでphpにpostする。
post先ではfor($i=0; $i<count($_FILES['file']['name']); $i++){でループさせて、a,bファイルに対応したディレクトリに配置する。

このように実装できるかと思います。
a,bファイルに対応したディレクトリ
は、連想配列で対応表を作っておくとよいかと思います。