回答編集履歴

1

調整

2022/06/30 06:47

投稿

yambejp
yambejp

スコア114843

test CHANGED
@@ -2,3 +2,44 @@
2
2
  ```html
3
3
  <input type="file" name="f[]" multiple>
4
4
  ```
5
+
6
+ こんな感じでやるとわかりやすいかも
7
+ ```javascript
8
+ <?PHP
9
+ print_r($_FILES);
10
+ ?>
11
+ <script>
12
+ window.addEventListener('DOMContentLoaded', ()=>{
13
+ const fd=new FormData();
14
+ document.querySelector('[type=file]').addEventListener('change',e=>{
15
+ const filename=e.target.name;
16
+ for(file of e.target.files){
17
+ fd.append(filename,file);
18
+ }
19
+ const lis=fd.getAll(filename).map(x=>`<li>${x.name}</li>`).join('');
20
+ filelist.innerHTML=lis;
21
+ });
22
+ document.addEventListener('submit',e=>{
23
+ e.preventDefault();
24
+ const t=e.target;
25
+ t.querySelector('[type=file]').value="";
26
+ t.submit();
27
+ });
28
+ document.addEventListener('formdata', e=>{
29
+ const filename=e.target.querySelector('[type=file]').name;
30
+ e.formData.delete(filename);
31
+ for(file of fd.getAll(filename)){
32
+ e.formData.append(filename,file);
33
+ }
34
+ });
35
+ });
36
+ </script>
37
+ <form method="post" enctype="multipart/form-data">
38
+ <input type="file" name="f[]" multiple>
39
+ <input type="submit" value="send">
40
+ </form>
41
+ <ul id="filelist">
42
+ </ul>
43
+ ```
44
+ このままだと追加はできても削除ができない、同じファイルが選択できたりする
45
+ など調整は必要になりますが、とりあえず動くと思います