ファイル選択と同時にアップロード HTML+JS

質問

HTMLとJava Scriptのことを質問させてください

<form>タグからファイルを選択すると同時をアップロードしたいと思っています。
複数の「ファイルを選択ボタン」を設置し、それぞれ"001.jpg"、"002.jpg"など指定の名前でアップロードしたいです。
下記のようにいくつかの<form>タグを設置し、javascriptでコントロールできるかと思いケース1のように書いた場合はうまくいったのですが、ケース2のように複数並べて記述した場合、動かなくなり困っております。

どなたか教えていただけないでしょうか？
よろしくお願いいたします

ケース1）

<form id="upload_file1" action="file_upload.php" method="post"　enctype="multipart/form-data" target="upload_frame">
　　　<input type="hidden" name="picture_id" value="001.jpg" />
　　　<input type="file" id="file_id_1" name="file_name" accept="image/jpeg">
</form>

<form id="upload_file2" action="file_upload.php" method="post" enctype="multipart/form-data" target="upload_frame">
　　　<input type="hidden" name="picture_id" value="002.jpg" />
　　　<input type="file" id="file_id_2" name="file_name" accept="image/jpeg">
</form>

<script>
var form = document.getElementById("upload_file1");
var input = form.file_name;
input.onchange = function (){
if(this.value){
form.submit();
}
};
</script>

ケース2）

<form id="upload_file1" action="file_upload.php" method="post"　enctype="multipart/form-data" target="upload_frame">
　　　<input type="hidden" name="picture_id" value="001.jpg" />
　　　<input type="file" id="file_id_1" name="file_name" accept="image/jpeg">
</form>

<form id="upload_file2" action="file_upload.php" method="post" enctype="multipart/form-data" target="upload_frame">
　　　<input type="hidden" name="picture_id" value="002.jpg" />
　　　<input type="file" id="file_id_2" name="file_name" accept="image/jpeg">
</form>

<script>
var form = document.getElementById("upload_file1");
var input = form.file_name;
input.onchange = function (){
if(this.value){
form.submit();
}
};

var form = document.getElementById("upload_file2");
var input = form.file_name;
input.onchange = function (){
if(this.value){
form.submit();
}
};
</script>

回答No.4

Ogre7077 · ベストアンサー

変数 form ですが、スクリプトの途中で上書きされています
var form = document.getElementById("upload_file1");
var form = document.getElementById("upload_file2");

イベント関数 onchange の内部にて変数 form を使っています
form.submit();

イベントが発生して関数が実行されると、この form の中身は
「イベント関数を宣言した時点の値」ではなく、
「イベント関数が実行された時点の値」と評価されます。

このため
フォーム upload_file1 でファイルを選択すると、
フォーム upload_file2 が submit されて送信。
という訳のわからない状態になっています。

修正するならば
* 変数名を form1,form2 と分ける
* onchange 内部で this.form.submit() とする
* フォーム毎に (function(){ ... })() で囲んで変数スコープを分ける

お礼

丁寧な解説どうもありがとうございました。
とても勉強になりました。
おかげさまでうまくできました。
本当に助かりました。

回答No.3

神崎 渉瑠（@taloo）

>No.1

セキュリティー上できないようになっているのなら、フォームが１つの時に成功する説明がつきませんよ。

変数名に注意してみてください。
質問文のそのままで、変数名をちょっと変えるだけで実現できます。

お礼

ありがとうございます。
ほんの少しのことだったんですね。
助かりました。

回答No.2

ORUKA1951

アップロードされるファイルの数には制限はありません。
その制限は、サーバーサイドのプログラムによる制限です。
　プログラムを確認してください。

＞選択ボタンと送信ボタンが別々だとユーザーの負担が大きいと思いました。
HTML5でしたら
<form action="#" method="post" enctype="multipart/form-data">
　<p>複数ファイル：<input type="file" name="example" multiple><br>
　　Ctrlを押しながらファイルを選択してください。</p>
で良いです。

　後方互換が必要な場合は、
<p><input type="file1" name="example1"></p>
<p><input type="file1" name="example2"></p>
<p><input type="file1" name="example3"></p>
　と複数作って、最後に送信ボタン

＞ファイルを選択し、最後に送信ボタンをひとつつけて送信することも考えたのですが、それでは部分的にしかアップロードされず、
　これはサーバー側のプログラムを修正してください。

お礼

どうもありがとうございます。
プログラム作成にとても大切な心構えを教えていただきました。
なかなか心くばりが行き届かず、反省しています。

回答No.1

ORUKA1951

しばしば、してしまう選択ミスへの対処は？？

　例えば、「あなたの写真を選択してください。」と書いておいて、エクスプローラーから選択したトタンに送信させるという悪意をもって設置されたら？？？
　そのようなことに対する最後の安全対策で基本的にはできないようになっていますが、それを押しのけてまで、そういう実装をしたい意図を知りたい。

　プログラム作成するときは、フェールセーフ・フールセーフも常に考えないとまずい。

補足

ご返事どうもありがとうございます。
安全対策のためにできないように設計されていたのですね。
それは知りませんでした。気が回らず失礼いたしました。

基本的にはユーザーの手間を簡略化するための仕様です。
構図があらかじめ決まった写真のアップロードが必要なサイトを構築したいと思っています。50枚以上の写真を選択する必要があるため、選択ボタンと送信ボタンが別々だとユーザーの負担が大きいと思いました。

ファイルを選択し、最後に送信ボタンをひとつつけて送信することも考えたのですが、それでは部分的にしかアップロードされず、ひとつの写真にひとつのボタンを設置することを考えた次第です。