JS(Jquery)でFormDataをPOSTする際に、画面遷移をしたい（submitボタン押下時と同じにしたい）

Question

Webアプリを作成してます。
現在機能として新規にデータを登録する画面を作成しています。お店の情報を登録するような画面です。

• お店の名前や連絡先などを<input type="text">で入力
• 画像ファイルもアップロードしたい（枚数は決めず何枚でもユーザーの操作で追加出来る）

ここで、この画像ファイルですが、
<input type="file">で選ばせるのではなく、ブラウザにファイルをドラッグすることで登録できようにしようと思い、

最速・最高のファイルアップロードに近づくための1歩
https://qiita.com/zaru/items/8c0ab5c70775644d4d41

こちらを参考に実装しました。
（「ドロップ」というところの実装方法です）

こちらの方法で、画面上にドラッグした画像ファイルを表示させ、JQueryでformDataに画像データをもたせる事までは出来ました。
(該当箇所は下記のような内容です）

  for (var i = 0; i < files.length; i++) {
    (function() {
      var fr = new FileReader();
      fr.onload = function() {
        var div = document.createElement('div');

        var img = document.createElement('img');
        img.setAttribute('src', fr.result);
        div.appendChild(img);

        var preview = document.getElementById("preview");
        preview.appendChild(div);
      };
      fr.readAsDataURL(files[i]);
    })();

    formData.append("file", files[i]);
  }

しかし、ここからどうやってPOSTさせるのかが分からずに悩んでいます。
同じく参考サイトに乗っていたPOST部分の処理が

var postButton = document.getElementById("post");
postButton.addEventListener("click", function() {
  var request = new XMLHttpRequest();
  request.open("POST", "POST_URL");
  request.send(formData);

とありましたが、この内容では非同期でPOST通信を投げるだけのようで、画面遷移が伴わない内容でした。

通常のsubmitボタンを押下した際のような、画面遷移を伴うPOST通信をこの方法で実現するにはどうすれば良いでしょうか。

現在、参考サイトの方法を少しいじり、既存の<form>の内容を取得するように、以下の様にFormDataオブジェクトを生成しています。
** この内容で非同期でのPOST通信ですが、希望している「お店の名前や連絡先」と「追加した画像データ」がPOSTされているのは確認出来ています。**

var formElement = document.querySelector("form");
	var formData = new FormData(formElement);

当初、<input type="file">に動的に画像データを追加して普通にsubmitボタンを押下させれば良いかと思ったのですが、Javascriptから<input type="file">にデータの設定などが出来ない仕様のようでした。

ですので、「元のformに画像を追加して普通にsubmit」が出来ないと判断し、「JSで元のformの内容を読込、さらにそこに画像ファイルを読み込んで追加していき、Javascriptでsubmitを実現」の方法しかないと判断しました。

私の要件を実現出来る方法を御存知でしたら教えてください。
宜しくお願いします。

---

追記
今回POSTして完了ではなく、通常のsubmit（POST通信）と同様の動きを希望しております。
サーバー側でPOSTされた内容から、確認画面用のHTMLを組み立ててレスポンスとして返し、確認画面を表示する、という流れを希望しておりました。

入力値はhidden値として確認画面で持ち回るつもりですが、画像についてはどうしたものか合わせて悩んでおりました。
最初のPOST時にサーバー側で一時ファイルとしてどこかに格納して、確認画面ではそれを表示などを検討しておりました。

ですので今回希望している動きはこの確認画面へPOSTと同時に遷移（サーバーからのレスポンスでHTMLを受け取って表示）という動きを希望しておりましたので、補足として追記いたします。

Answer 1

アイディアだけ

---

ドロップ操作によって得られたFileオブジェクトを直接フォームデータに追加することは難しいので, FileReaderオブジェクトを用いてFileオブジェクトの中身をbase64エンコードされた文字列に変換し, その内容をinput[type="hidden"]に仕込めば通常のサブミット操作・処理と同様に実装できるでしょう.
（この場合サーバー側でのデコードが必要となります）

---

NOTE:
PHP使いの方からのツッコミを覚悟しながらとりあえず動いたものを記述.(出来ることの証明)
※JPEG画像のみを想定しており, 一切のエラー・例外系を考慮していません.

HTMLサイド

• input[type="file"]及びdropイベントで取得したFileオブジェクトをFileReaderオブジェクトでdata uri scheme形式に変換.
• その内容をinput[type="hidden"]に設定(data:image/jpeg;base64,の部分は削除)
• サブミット処理はform要素標準のものを利用する.

<form id="form" action="next.php" method="post">
	<button type="submit">送信</button>
	<input id="file" type="file"/>
	<input name="encoded" type="hidden" value=""/>
</form>
<script>
"use strict";
{
	let selected;
	const reader = new FileReader();
	reader.onloadend = e => {
		form.encoded.value = e.target.result.split(",")[1];
	}
	window.ondragover = e => e.preventDefault();
	window.ondrop = e => {
		e.preventDefault();
		reader.readAsDataURL(e.dataTransfer.files[0]);
	};
	file.onchange = e => {
		reader.readAsDataURL(file.files[0]);
	};
}
</script>

PHPサイド

• hidden項目の内容をバイナリに変換し, ファイルに保存.
• とりあえず正しく受信できていることを確認するため, JPEG画像としてバイナリをechoで出力.

<?php
//https://stackoverflow.com/questions/6735414/php-data-uri-to-file
$encoded = $_REQUEST["encoded"];
$replaced = str_replace(" ", "+", $encoded);
$bin = base64_decode($replaced);

$fp = fopen("test.jpg", "wb");
fwrite($fp, $bin);
fclose($fp);

header("Content-Type: image/jpeg");
echo $bin;

Comments

[yoshihiro_yy]

色々と試行錯誤してる中でそれも試した記憶はあるのですが、なにかダメだったので諦めたのですが、今一度試しにやってみます。

[yoshihiro_yy]

わざわざサンプルソースまでありがとうございます！

皆さんからご回答頂いてから色々と試したところ、defghi1977さんから頂いた内容で一歩前進が出来ました！

最終的なファイルの保存などまでは出来ていませんが、hiddenにBase64エンコード後のファイルデータをセットすることで、希望する確認画面へ持っていく事が出来ました。

これからデコードして画像ファイルとしてサーバー上に保管するなど試してみます。

defghi1977さん含め、みなさまご回答ありがとうございました。大変助かりました。
AJAXの方もいい機会なので別の機能でうまく利用できればと思います。

Answer 2

通常のFormのPostであるならClickイベントに対してformElement.submit();すれば良いのではないでしょうか?

Comments

[yoshihiro_yy]

最初そう思ったのですが、Fileオブジェクトを後から元のformのデータに追加出来ないようでして、記載したFormDataオブジェクトをPOSTしないと画像データを含めることが出来なかったのです。。。
元のform.submit()だとあくまでもJSで追加した画像以外の元のformの内容のみのPOSTになってしまいました。。。

上記方法で取得した画像ファイルを元のformに追加する方法はありますでしょうか？

Answer 3

XMLHttpRequest のコールバック（サーバからの返却）にPOST後の画面（POSTされたデータを持ったページ）へのURLを入れておいてlocation.href を使ってそのページに移動してみてはいかがでしょうか。

Comments

[yoshihiro_yy]

XMLHttpRequestについて本日初めて知ったレベルなので今調べてる最中なのですが、ご回答頂いた流れだと
１、POST通信を非同期で実施する
２、その後、そのレスポンスで取得したURLにGET通信で移動する
という動きになりますでしょうか？

事前の情報が足りず申し訳ないのですが、遷移後の画面はPOST内容の確認画面を作りたく思っており、POST通信して終わりではなく、POST通信のレスポンスで確認画面のHTMLを取得するという流れのつもりでした。
（Springを利用しており、POSTのformの内容から次の画面に表示するデータを生成してレスポンスとして返すといった動きです）

後ほど補足として追記しておきます。
ご回答有り難うございます。

Answer 4

画面遷移するのであれば、AJAXを使わずに、HTMLで行うべきです。画面遷移をさせたくない時の手段がAJAXだからです。

Comments

[yoshihiro_yy]

AJAXを利用したことがなかったこともあり、利用するつもりはなかったのですが、上記画像ファイルの取得（FormDataオブジェクトに追加する）の方法だと、htmlの方の元のformに画像ファイルを追加することが出来ないようでして。。

上記の画像の投稿方法から通常のhtmlのsubmitと連携させる方法はありますでしょうか？

[退会済みユーザー]

dropが完了した時に、submit() すればいいだけ。

[yoshihiro_yy]

すみません、drop時にそのままsubmitを希望はしていないのです。。。
画像の用意とは別に入力欄への入力をする場合もあり、最終的にsubmit用のボタンを押下した際にsubmitさせるという流れが希望でした。

ただdrop完了時でも他の方への返信でも記載したのですが、FormDataオブジェクトを元のformに合流させる事が出来ないようで頭を抱えております。。。

[退会済みユーザー]

なるほどそう言うことですね。
AJAXを使う以上、JavaScriptで結果を一旦受け取って、確認画面に値を受け渡すしかないでしょうね。