質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

3598閲覧

ajaxで動的にファイル送信する方法について質問です

miKoTo0765

総合スコア35

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1グッド

0クリップ

投稿2016/03/10 07:49

編集2016/03/10 08:07

HTML

1<form id="form" action="index.php" method="post" enctype="multipart/form-data"> 2 <input type="file" name="img1" id="img1"> 3 <input type="file" name="img2" id="img2"> 4 <input type="submit"> 5</form>

Javascript

1var fd = new FormData($('#form').get(0)); 2 3$.ajax( { 4 url: 'ajaxtest.php', 5 type: 'post', 6 processData: false, 7 contentType: false, 8 data: fd, 9 dataType: 'json', 10 success: function(data) { 11 alert(data.info); 12 }, 13 error: function(xhr, status, error) { 14 alert('ERROR : ' + status + ' : ' + error); 15 } 16}); 17

この様にやれば動的にファイルを送信することができるのですが「img1」と「img2」が同時に送信されてしまいます。
これを「img1」だけまたは「img2」だけ送信されるようにするにはどうすればいいのでしょうか?

「img1」でファイルを選択したら「img1」のファイルだけ動的に送信したいイメージです。

「img1」「img2」をそれぞれformタグで囲う方法以外でおねがいします。

misa👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tkanda

2016/03/10 09:52

一つ確認させてください。HTMLフォームのほうの「送信」ボタンがクリックされた場合は img1、img2を両方送信するが、javascriptのコードが実行された場合は img1/img2のどちらか一方だけを送信したい、ということですか?
miKoTo0765

2016/03/10 21:15

そういう事になります。
guest

回答2

0

ベストアンサー

FomrDataを自力で組み立てる方法はいかがでしょうか?

JavaScript

1var fd = new FormData(); 2fd.append('img1', $('#img1').context); 3$.ajax({ 4 url: 'ajaxtest.php', 5 type: 'POST', 6 contentType: false, 7 processData: false, 8 data: fd, 9 dataType: 'json', 10}); 11

上の例では、一方の画像だけを選択する部分は省略しましたが、こんな感じでFormDataにファイルを追加して送信できます。

ご参考になれば。

投稿2016/03/10 23:12

tkanda

総合スコア2425

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miKoTo0765

2016/03/11 02:18

こちらの方法大変参考になりました。 結果的に var $file = $('#img1'); var fd = new FormData(); fd.append($file.attr('name'),$file.prop('files')[0]); で、やりたいことが実現できました。 ありがとうございました。
guest

0

FormData から削除してはどうでしょう?

javascript

1// 消したい方を消す 2fd.delete("img1"); 3fd.delete("img2");

投稿2016/03/10 10:32

編集2016/03/10 10:32
root_jp

総合スコア4666

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miKoTo0765

2016/03/11 02:21

こちらの方法ですと復元が大変そうです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問