file名を変動しながら、ファイルアップロードしたい。

Question

●現在行っていること・できていること
複数画像をアップロードする機能を作成しています。
添付ファイルを追加するボタンを押すと特定のhtmlが追加される(test.insertAdjacentHTML部分)のhtmlが追加されて、その時に出てきた
削除ボタンを押すと削除される所までは、実装できました。

●実現したいこと
DBに登録するためにinput name=fileの所を上から順番に並べて登録したいです。ただ、追加した時には、上から連番になったfileの名前になるのですが、削除を押した時にうまく並んでくれません。

●html部分

    <!-- 画像は、パスで登録する -->
    <div class="attachedFile">
      <!-- クリックしない時は、attachedFileAddPartsは空ファイル -->
      <div class="attachedFileAddParts" id="ui-id-1"></div>
      <!-- クリックした際は、下記のようになる -->
        <!-- ファイルを追加ボタンを押すと追加できる。削除ボタンを押すと消せる -->
        <!-- <div id="cba_commonAttachedFile0" class="attachedFileParts" data-file-count="0"> -->
          <!-- クリックした数をカウントしている(リロードしたら、再度0からスタートで、押して追加数がカウント、削除で消しても連番になる) -->
          <!-- <input type="hidden" name="attachNumber0" value="0"> -->
          <!-- 削除ボタンを押した時ファイル番号は、リセットされて0からスタートする 複数ある時は、消した分番号が若返る 4つあってfile3のものでもそれより前のfile1などを削除したらfile2になる。-->
          <!-- <input type="file" size="30" name="file0" class="inputFile">
          <span class="guide">(25MBまで)</span>
          <a href="javascript:void(0);" class="attachedFileList__delete attachedFileDeleteiconLink">
            <img src="" alt class="icon">
            <span>削除</span>
          </a>
        </div> -->
      <!-- </div> -->
      <div class="attachedFileAddWrapper">
        <!-- 添付ファイルを追加するをクリックした時に、data-file-countとdata-attach-numberが1になる -->
        <!-- 削除した際にdata-file-countの個数が一つ減る -->
        <div id="attachedFileAdd" class="attachedFileAdd" data-file-count="0" data-attach-number="0" >
          <a href="javascript:void(0);" class="fileadd iconLink" onclick="attachFileClick();">
            <img src="" alt="">
            <span>添付ファイルを追加する</span>
          </a>
        </div>

●js部分

// ##############################################
// 添付画像の処理を記載

// ##############################################
// TODO 番号のリセットなどを実装して、DB上で複数登録させる
//カウンターを設定する
var attachcount = 0;
var deletecount = 0;
//ファイルのカウント数を設定する
var filecount = 0;
//添付ファイルのボタンが押された際と削除した際の画像にファイル名を動的に与える為に必要
var attachbox = document.getElementById('attachedFileAdd');
var data_file_count = attachbox.getAttribute('data-file-count');
var data_attach_number = attachbox.getAttribute('data-attach-number');
//添付ファイルを追加するボタン
function attachFileClick(){
  //添付ファイルを追加するを押した回数をカウントアップする
  attachcount++;
  //ファイルのカウント数を追加する
  filecount++;
  var counter = attachcount;
  var test = document.getElementById('ui-id-1');
  console.log('data_file_count:',data_file_count);
  console.log('data_attach_number:',data_attach_number);
  //削除した時は、一つ減って、通常は、プラス
  data_file_count++;
  attachbox.setAttribute('data-file-count',data_file_count);
  // リロードするまでは、保持される(追加したファイルの履歴数)
  data_attach_number++;
  attachbox.setAttribute('data-attach-number',data_attach_number);

  //要素内の、最後の子要素の後ろ
  test.insertAdjacentHTML('beforeend',
              '<div id="cba_commonAttachedFile'+ counter +'"'+'class="attachedFileParts" data-file-count="'+counter +'">'
              +'<input type="file" size="30" name="file' + filecount +'"' +'class="inputFile">'
              +'<span class="guide">(25MBまで)</span>'
              +'<a href="javascript:void(0);" class="attachedFileList__delete attachedFileDeleteiconLink" onclick="deleteFileClick();">'
              +'<img src="" alt class="icon">'
              +'<span>削除</span>'
              +'</a>'
              +'</div>');
}

//添付ファイルを削除するボタン
function deleteFileClick(){
  //削除ボタンをクリックした回数をカウントアップする
  deletecount++;
  data_file_count--;

  var counter = deletecount;
  var test = document.getElementById('cba_commonAttachedFile'+counter);
  test.parentNode.removeChild(test);
  //削除した時は、一つ減って、通常は、プラス
  attachbox.setAttribute('data-file-count',data_file_count);
}
</script>

お手数ですが教えていただければ幸いです。

Comments

[x_x]

multiple属性によって一つのinputで複数のファイルを送信することが可能ですが、そうはしないのでしょうか？

[m.ts10806]

DBはなにでどうやって接続する想定でしょうか。

[aushijima]

すみません。複数のファイルを順番通りに登録することが実現したいことなので、inputでできればそれが一番いいです。

[aushijima]

DBは、MySQLを想定しています。

Answer 1

input name=fileはデフォルト値を設定しても無効で任意にユーザーが選択しないと
ファイルは選択できません
それを前提とした質問ということでよろしいですか？

その上で任意の順番にサーバーにデータを送る場合はクロスドメインでなければ
ajaxで順番に送ってあげる必要があると思います。

ただ順番におくる意味があるかといわれると微妙です。
一緒におくって、サーバー側で順番に処理すればいいような気がします

単純パターン

• send.html

<form id="f1" action="recv.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="group_no" value="10005">
<input type="file" name="f[]"><br>
<input type="file" name="f[]"><br>
<input type="file" name="f[]"><br>
<input type="submit" value="go">
</form>

• recv.php

<?PHP
$group_no=filter_input(INPUT_POST,"group_no");
$uploads_dir = '/uploads';
if(count($_FILES)>0){
  foreach($_FILES["f"]["tmp_name"] as $key=>$tmp_name){
    if($_FILES["f"]["error"][$key]>0) continue;
    $up=$uploads_dir."/".$group_no.($key+1);
    echo "move_uploaded_file('$tmp_name','$up');\n";
   //move_uploaded_file($tmp_name, $up); //実際にはこちらを利用
  }
}
?>

画面遷移しない

• send.html

<script>
$(function(){
  $('#f1').on('submit',function(e){
    e.preventDefault();
    var fd=new FormData($(this).get(0));
    $.ajax({
      "url":$(this).attr('action'),
      "type":"post",
      "data":fd,
      "cache":false,
      "processData": false,
      "contentType": false,
    }).done(function(data){
      console.log(data);
    });
  });
});
</script>
<form id="f1" action="recv.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="group_no" value="10005">
<input type="file" name="f[]"><br>
<input type="file" name="f[]"><br>
<input type="file" name="f[]"><br>
<input type="submit" value="go">
</form>

Comments

[aushijima]

回答ありがとうございます。

ファイルは、必須項目でないので、任意にユーザーが選択しないとファイルが選択できないということを前提の質問で良いです。

ajaxなどは、触ったことないのですが、ajaxで一緒に送ってあげたりすることも可能なのですか？

[yambejp]

ajaxで同時に送ることは可能です
手っ取り早くやるにはformDataを利用することになります。
またページが遷移していいなら普通にpostで送ればいいでしょう

なおご理解いただいているとは思いますがファイルのやり取りには
formにenctpe="multipart/form-data"の指定が必要です

[aushijima]

ありがとうございます。できれば、画面を遷移させずに実装したいです。
ajaxでやりたいと思います。
下記のサイトのように実装すれば良いですか？
https://qiita.com/BRS_matsuoka/items/ba79a2f500a10ddc0923

[yambejp]

> input name=fileの所を上から順番に並べて登録したいです。ただ、追加した時には、上から連番になったfileの名前

の仕様がいまいちどうしたいかわかりません。
ファイル名は選択した元のファイル名を使わず、
1(もしくは任意の数値)から順番に連番にしたいのですか？
拡張子はどうするのでしょうか？

[aushijima]

分かりづらくてすみません。

ファイル名は、選択した元のファイル名を使用せずに、特定のgroup_noと紐づけた形でDBに格納したいので、group_noの後にファイルをあげた順番通りの連番をつなげて画像のpathとファイル名をつなげてp画像のパスを格納したいです。
group_noが10005で、画像を4枚アップロードしたら、100051,100052,100053,100054のようにしたいです。

拡張子は、pngやjpegなど問わずにあげれるようにする仕様です。

ただ、上記のようにしなくても問題なくて、もっと良い方法があれば、それでやりたいと思います。

社内のグループウェアの制作の過程で作っていますが、グループウェアなど制作したことがなくどのような仕様がいいのか分からず、参考にしているグループウェアと同じようになるように作っています。なのでもっと良い方法があれば教えていただけると幸いです。

[yambejp]

ページ遷移あり・なし、両方つけておきました。
セキュリティ的にはもう少し処理が必要ですが、流れは確認できると思います。
名前の変更はサーバー側に任せるのが寛容です。
（今回はphpでの受けとしましたが環境に合わせて読み替えてください）

[aushijima]

ありがとうございます。参考にしてみます。ちなみにセキュリティ的には、どのような対策をすれば良いのでしょうか？

[yambejp]

>セキュリティ

今回のケースですと
<input type="hidden" name="group_no" value="10005">
のvalueを書き換えられるとアップロード先をぐちゃぐちゃにされるケースがあります。
$group_noから「..」とか「/」をサニタイズする必要があるでしょう

またすでにファイルが存在する場合どうするかとか、削除をどうするかなど
運用面で決めなくてはいけない仕様も多々ありそうです

[aushijima]

色々と教えていただきありがとうございます。検討してみます。