●現在行っていること・できていること
複数画像をアップロードする機能を作成しています。
添付ファイルを追加するボタンを押すと特定の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>
お手数ですが教えていただければ幸いです。
回答1件
あなたの回答
tips
プレビュー