質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

4回答

500閲覧

input type="file"で、選択のたびにクリアーされるのではなく、ファイルが一覧に追加されていくものをつくりたい

takashinago

総合スコア2

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2022/06/30 05:35

input type="file"で、
ファイルが、選択のたびにクリアーされるのではなく、ファイルが一覧に追加されて、
それをpostできるものをつくろうとしています
が、うまくいきません

現在試しているのは、変数fileInputsに、fileオブジェクトをファイル選択の度に追加しようとしています

該当のスクリプトはこちらです

JavaScript

1let fileInputs = {}; 2 3formFile.forEach(function (element, index) { 4 element.addEventListener("change", function (e) { 5 const input = document.getElementById('formFile'); 6 const dt = new DataTransfer(); 7 fileInputs = e.target.files; 8 console.log('fileInputs', fileInputs); 9 10 for(let i = 0; i < fileInputs.length; i++) { 11 fileInputs = Object.assign(fileInputs, e.target.files[i]); 12 console.log('e.target.files', e.target.files); 13 console.log('fileInputs', fileInputs); 14 } 15 for(let i = 0; i < fileInputs.length; i++) { 16 dt.items.add(fileInputs[i]); 17 } 18 input.files = dt.files; 19 }); 20});

どのように修正をすればよろしいでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

ベストアンサー

とりあえず、

  • const dt = new DataTransfer(); を関数の外に出す。(複数の <input type=file> が対象の場合は、なんとかして複数の DataTransfer オブジェクトを生成して紐付ける必要があります)
  • 1つめの for ループを消す
  • input.files = dt.files;e.target.files = dt.files; に変更

で意図どおり動くと思います。

投稿2022/06/30 06:10

int32_t

総合スコア20659

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takashinago

2022/06/30 06:39 編集

返答ありがとうございます! こちらの修正で意図通りに動作いたしました! 本当にありがとうございます!
guest

0

1つの<input type="file">で対応するのではなく、入力1ファイルごとに1つ<input type="file">を作って増やしていく、という手法もありではないかと考えます。

投稿2022/06/30 06:01

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takashinago

2022/06/30 06:35

返答ありがとうございます! inputを増やすのではなく、現状の体裁のままで対応を頼まれていまして でも、返答のお時間を割いてくださってありがとうございます!
guest

0

変数fileInputsに、fileオブジェクトをファイル選択の度に追加しようとしています

とのことですが、

js

1fileInputs = e.target.files;

 と書かれていますから、fileInputs の中身は「今回選択されたファイルのファイルリスト(要素数1)」にイベントごとに上書きされています。

 ですので、「変数fileInputsに、fileオブジェクトをファイル選択の度に追加」とは、「今回選択されたファイルのファイルリスト(要素数1)」に「今回選択されたファイルのファイルリスト(要素数1)」を追加することになると思います。

 これは、想定していることと違うのでは。

投稿2022/06/30 06:58

編集2022/06/30 07:01
Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takashinago

2022/07/01 01:12

ファイル選択で送信できるファイルを追加していくには、 どこかでファイルを保持しておかないといけないと思ったので、 変数fileInputsにまとめて保存したものをDataTransfer オブジェクトに紐づければよいのかと思い、 この方法をとっていました ですが、想定していたことは、 const dt = new DataTransfer(); を関数の外に出すことで動作する内容でしたので、 大丈夫です でも返答してくださってありがとうございます!
guest

0

質問の意図がわかりかねますが、一気に選ぶならmultiplueで良いのでは?

html

1<input type="file" name="f[]" multiple>

こんな感じでやるとわかりやすいかも

javascript

1<?PHP 2print_r($_FILES); 3?> 4<script> 5window.addEventListener('DOMContentLoaded', ()=>{ 6 const fd=new FormData(); 7 document.querySelector('[type=file]').addEventListener('change',e=>{ 8 const filename=e.target.name; 9 for(file of e.target.files){ 10 fd.append(filename,file); 11 } 12 const lis=fd.getAll(filename).map(x=>`<li>${x.name}</li>`).join(''); 13 filelist.innerHTML=lis; 14 }); 15 document.addEventListener('submit',e=>{ 16 e.preventDefault(); 17 const t=e.target; 18 t.querySelector('[type=file]').value=""; 19 t.submit(); 20 }); 21 document.addEventListener('formdata', e=>{ 22 const filename=e.target.querySelector('[type=file]').name; 23 e.formData.delete(filename); 24 for(file of fd.getAll(filename)){ 25 e.formData.append(filename,file); 26 } 27 }); 28}); 29</script> 30<form method="post" enctype="multipart/form-data"> 31<input type="file" name="f[]" multiple> 32<input type="submit" value="send"> 33</form> 34<ul id="filelist"> 35</ul>

このままだと追加はできても削除ができない、同じファイルが選択できたりする
など調整は必要になりますが、とりあえず動くと思います

投稿2022/06/30 05:53

編集2022/06/30 06:47
yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takashinago

2022/06/30 06:04

返答ありがとうございます multipleの設定はすでに設定済みですが、 そうではなくて、ファイルを1つ1つ選択していった場合でも、ファイルがクリアーされずに ポスト出来るファイルが過去に選択した分も含めて増加して欲しいのです
yambejp

2022/06/30 06:09

UI的にファイルの削除ができなくなるから無理があるのでは? 専用の処理を入れればできそうな気もしますが・・・
takashinago

2022/06/30 06:39 編集

返答ありがとうございます! 動作の要望を変えられない状態でして ですが、貴重な時間を割いてくださって本当にありがとうございます!
yambejp

2022/06/30 06:50

ファイルを追加する場合のサンプルあげてあります。 うまく処理すれば選んだファイルからいらないものを削除することもできるでしょう
takashinago

2022/07/01 01:18

サンプルをあげてくださってありがとうございます! 勉強になりました! ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問