input type="file"の情報保持について

input type="file"の情報保持（改変？）について、何か良い方法がないかお力添えいただきたいです。

html
1<form method="post" enctype="multipart/form-data">
2  <input type="file" id="example-file" name="example-file[]" accept="image/*" multiple>
3  <button>送信</button>
4</form>

上のようなファイル送信するフォームを作成し、
その後PHPで$_FILESを用いて取得した情報をあれこれする処理を実装中です。
また、ファイル送信は複数枚できるのを想定しています。

この時、例えば「input type="file"で画像Aのみ選択」や「input type="file"で画像Aと画像Bを同時に複数選択」した場合であれば、ボタン押下後にPHP側でも情報取得（$_FILESで確認）できるのですが、下記パターンのように一度にまとめて選択しなかった場合は、後から選択した画像Bの情報のみ取得でき、最初に選択した画像Aの情報は$_FILESで確認できません。

input type="file"に画像Aをアップ
その後 input type="file"に画像Bをアップ
送信ボタン押下

挙動としてinput type="file"の情報が後から上げた画像Bの情報へ上書きされたというのは分かるのですが、
最初にあげた画像Aの情報を保持しつつ画像Bの情報を追加して、
それを送信ボタン押下時にinput type="file"や$_FILESの情報としてまとめて送信させるということは可能でしょうか。

maisumakun

2021/10/12 06:47

> 最初にあげた画像Aの情報を保持しつつ画像Bの情報を追加してどのような操作体系を考えていますか？そのままのアップロードフォームであれば「上書きされることを想定して操作する」かと思います。

homu2021

2021/10/12 07:01

ご回答ありがとうございます。まず、画像のアップロードは複数枚できる想定です。例えば、ユーザーが一度に3枚の画像をアップしたい時、`input type="file"`クリックで最初から3枚選択してもらえればいい話ではあるのですが、それを最初に2枚アップして、その後追加でもう1枚アップのように、`input type="file"`を複数回クリックするような動作で行おうとした時に、最初にアップした2枚の情報を保持しつつ後からアップした情報を追加させることは可能かご質問させていただきました。挙動的に上書き操作されるのは理解しているのですが、上書きではなく追加のような動作を実現できないものか悩んでいます。

行動規範の内容に同意します

回答4件

ベストアンサー

<input type=file multiple>のブラウザのUXがひどい(異なるディレクトリにあるファイルを選択することができない、一度選択すると追加できない等)、という話なんだと思います。

この問題を避けるためには、現状では multiple を辞めるしかなくて、「ファイルを追加」のようなボタンを設けてそのボタンが押されたら同一のname属性を持つ<input type=file> (multipleなし)を足していくのがよいでしょう。

投稿2021/10/12 07:05

int32_t

総合スコア20880

maisumakun

2021/10/12 07:15

> 現状では multiple を辞めるしかなくて、 multipleに入った複数のファイルを、複数の<input type="file">に分配することも、（IEとiOS≦14.4を切り捨てられるなら）可能です。 https://qiita.com/jkr_2255/items/1c30f7afefe6959506d2

homu2021

2021/10/12 07:21 編集

ご回答ありがとうございます。 > 同一の`name`属性を持つ`<input type=file>`を足す完全に盲点でした。軽く試したら近い動きができそうでしたので、これで試してみます。ありがとうございました！

行動規範の内容に同意します

最初にあげた画像Aの情報を保持しつつ画像Bの情報を追加して、

それを送信ボタン押下時にinput type="file"や$_FILESの情報としてまとめて送信させるということは可能でしょうか。

可能か不可能かで言えば可能です。

ただし、「選択した瞬間に裏で非表示の<input type="file">を生成してそちらにデータを移行する」など、大掛かりな仕掛けが必要であり、またiOSも最近の更新でやっと可能になった機能性を使ったり、また先にアップした画像を何らかの方法で表示しておくなど（そうしないと意図しない画像がアップされて混乱する元になる）、実用的な動作をするように仕上げるには相応の手間が要求されます。

投稿2021/10/12 07:03

maisumakun

総合スコア145184

homu2021

2021/10/12 07:20

挙動が気になるので、勉強も兼ねてこちらも試してみたいと思います。ありがとうございました。

行動規範の内容に同意します

type=fileは選択されたファイル情報を保持してるだけで、選択しただけでアップされるわけではないです。
例えば、選択するたびに非同期で任意フォルダに一時的にアップロードしてファイル名などその場に表示、ファイルパスをどこかに保持しておき、「送信」押したときに本フォルダに移動するとかすれば、もしかしたらご希望の流れになるかもしれません。

投稿2021/10/12 06:58

m.ts10806

総合スコア80850

homu2021

2021/10/12 07:09

ご回答ありがとうございます。任意フォルダへの一時的アップロードは諸事情によりできずでして...。別の言い方をすると、通常送信ボタン押下後に確認できる`$_FILES`の情報は、そのボタン押下時の`input type="file"`の情報を参照していると思うのですが、この`$_FILES`の情報をこちらで改変して送信することは可能だったりするのでしょうか。（セキュリティ的にNGだとは思いますが）

m.ts10806

2021/10/12 07:38

無理です。ただ、そもそもがテンポラリにアップロードしたファイルをmoveするので、あんまり変わらない気はしますが。

行動規範の内容に同意します

質問の意図がわかりかねるのですが
先にAを送信してしまったが保持しておいて後から送ったBと一緒になにかしたいということですか？
ユニークな名前をつけて管理すれば別名として保存されますがそれではだめなのでしょうか？

投稿2021/10/12 06:36

yambejp

総合スコア114839

homu2021

2021/10/12 06:52

ご回答ありがとうございます。わかりにくくて申し訳ありません。 1. 「画像Aを選択 → 送信ボタン押下 → `var_dump($_FILES)`」の場合 → 画像Aの情報を確認できる。 2. 「画像Aと画像Bを同時に選択 → 送信ボタン押下 → `var_dump($_FILES)`」の場合 → 画像A・画像B両方の情報を確認できる。 3. 「画像Aを選択 → 送信ボタンは押さずに、次に画像Bを選択 → 送信ボタン押下 → `var_dump($_FILES)`」の場合 → 画像Bの情報のみ確認できる。現状で上記のような挙動なのですが、 3のような動作をした時に、送信ボタンは1回しか押さないけれども画像A・B両方の情報を2のようにまとめて`$_FILES`で取得したいです。

行動規範の内容に同意します

あなたの回答