- ベストアンサー
File API で複数画像を複数回に分けて選択
HTML5から追加されたFile APIでハマってしまったので質問させてください。 FileAPIで、複数画像を複数回に分けて選択するための機能を作っているのですが、うまくいきません。 1回目の選択は問題ないのですが、2回目にファイル選択をすると、1回目に選択したファイルに上書きされる形でpostされてしまい、データを受け取ることができません。 過去に同じようなものを作ったことがある方がいらっしゃいましたらご教授願いたいです。 よろしくお願いします。
- みんなの回答 (3)
- 専門家の回答
質問者が選んだベストアンサー
ちょっと気になったのですが、間違えて選択しても取り消さないという仕様でよろしいのでしょうか? 複数の画像選択ボタンを配置するという発想ではいかがしょうか。 複数回目は動的に表示するという感じで。
その他の回答 (2)
- b0a0a
- ベストアンサー率49% (156/313)
.filesではなくfiles[0]のファイルを配列にでも貯めていってください。
お礼
ご回答ありがとうございました! お礼が遅くなってしまいました、すみません。 試行錯誤してみたのですが、配列に貯めたものをphp側に吐き出そうとするときにどうしても思ったような挙動にならずに期限もあったために断念してしまいました。。。 再度リベンジしてみたいと思います!
- b0a0a
- ベストアンサー率49% (156/313)
ソースがない質問はありえません。
お礼
ご指摘ありがとうございます!
補足
大変失礼致しました。 <form action="upload.php"> <input id="files" type="file" name="upfile[]" multiple> </form> でファイルを選択すると、 document.getElementById("files").files で現在添付中のファイルにアクセスできるところまでは行けました。 しかし、一度のpostで複数回に分けてこのインプットに画像を添付しようとすると、最新で選んだファイルのみしか添付されませんでした。 そこで、document.getElementById("files").filesを一旦変数に格納しておいて、 2回目以降はそこにpushしていこうとしたのですが、単純に配列のようには扱えないようです。 1回目の、2回目と選択した全てのファイルをpostするためにはどうしたらいいでしょうか・・? という内容でした。
お礼
ご回答ありがとうございます! お礼が遅くなってしまい申し訳ありません。 最終的にどうしてもうまくできなかったので、動的に画像選択ボタンを配置する という方法をとらせていただきました! 自分では至らなかった発想です。アドバイスいただきありがとうございました!