
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ベストアンサー
- 回答日時:
変数 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
- 回答日時:
>No.1
セキュリティー上できないようになっているのなら、フォームが1つの時に成功する説明がつきませんよ。
変数名に注意してみてください。
質問文のそのままで、変数名をちょっと変えるだけで実現できます。
No.2
- 回答日時:
アップロードされるファイルの数には制限はありません。
その制限は、サーバーサイドのプログラムによる制限です。
プログラムを確認してください。
>選択ボタンと送信ボタンが別々だとユーザーの負担が大きいと思いました。
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
- 回答日時:
しばしば、してしまう選択ミスへの対処は??
例えば、「あなたの写真を選択してください。」と書いておいて、エクスプローラーから選択したトタンに送信させるという悪意をもって設置されたら???
そのようなことに対する最後の安全対策で基本的にはできないようになっていますが、それを押しのけてまで、そういう実装をしたい意図を知りたい。
プログラム作成するときは、フェールセーフ・フールセーフも常に考えないとまずい。
この回答への補足
ご返事どうもありがとうございます。
安全対策のためにできないように設計されていたのですね。
それは知りませんでした。気が回らず失礼いたしました。
基本的にはユーザーの手間を簡略化するための仕様です。
構図があらかじめ決まった写真のアップロードが必要なサイトを構築したいと思っています。50枚以上の写真を選択する必要があるため、選択ボタンと送信ボタンが別々だとユーザーの負担が大きいと思いました。
ファイルを選択し、最後に送信ボタンをひとつつけて送信することも考えたのですが、それでは部分的にしかアップロードされず、ひとつの写真にひとつのボタンを設置することを考えた次第です。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- CGI htmlからパラメータで、cgiに渡したい。 1 2023/02/06 16:15
- PHP PHP MySQLに画像を直接保存 2 2022/06/05 11:50
- PHP PHPで画像の渡しが上手く行きません。 1 2023/02/02 09:39
- PHP PHP MySql 画像を取得 1 2022/06/04 14:05
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- PHP imageフォルダに、画像をリサイズして保存する時のファイル名を変更したい 1 2023/05/30 11:39
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
同意チェックボックスはひとつ...
-
Cookieに保存されない
-
検索フォームから、同時に複数...
-
ページを再読み込み後、再読み...
-
Netscape で submit() を複数起...
-
onSubmitでフォームの値を変える
-
郵便番号検索フォームにおけるJ...
-
1つのform内に2つのsubmitボタ...
-
JavaScriptのif文について質問...
-
submitボタンを表示することな...
-
1つのURLを入力して複数のペー...
-
(ホームページ)フォームを使...
-
onsubmitのこと
-
タブキーでなくエンターキーで...
-
FormのonsubmitでJavaスクリプ...
-
Javascriptでlocation.hrefが妙...
-
submitした値を返したい
-
フォーム内で記入したクエリ送...
-
ハイパーリンクを別ウインドウ...
-
背景色を変えて未入力チェック...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
submitした値を返したい
-
別ウィンドウへのsubmitの挙動...
-
iframe内のformをサブミットす...
-
1つのページにformを2つ設置。2...
-
radiobuttonとbuttonを組み合わ...
-
JavaScript:現在フォーカスの...
-
Javascriptでlocation.hrefが妙...
-
C# 配列などの受け渡し
-
submitボタンを表示することな...
-
別窓ウィンドウから親ウィンド...
-
タブキーでなくエンターキーで...
-
inputのvalueを変数として使うには
-
フォームのvalueに配列を格納す...
-
FormのonsubmitでJavaスクリプ...
-
submitボタン押下後、disabled...
-
指定したタグを書き換えるには?
-
リンク先アドレスの一部にテキ...
-
enterについて2
-
フォームが空欄の時にフォーム...
-
ファイル選択と同時にアップロ...
おすすめ情報