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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Q&A

解決済

2回答

12788閲覧

JqueryのFormDataでappendができない

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

0グッド

0クリップ

投稿2018/01/23 06:20

##わからないこと
いつもお世話になっております。
この度ファイルデータをajaxを使って飛ばそうとしています。
ファイルのほうは問題なく取得できているのですが、それに追加でappendでidにあたるものを飛ばそうとしています。しかしそのappendができておりません。

コードは下記になります。

var $fileList = $('#file_list'); $fileList //画像がアップロードされた時の処理 .on('change.inputFile', '.input_file', function(e){ //画像が3つになった場合にinputタグを非表示にする処理 //上にも同じコードがあるのでまとめた方がいいのですが... var $fileListLI = $('#file_list li label input[name=img_file]'); var inputFileNum = $fileListLI.length; var lastInputFile = $fileListLI.eq(-1); if (inputFileNum == 4){ $(lastInputFile).hide(); } //Ajaxで飛ばすdata(FromDataオブジェクト)を生成する処理 var fd = new FormData($('#cv_form').get(0)); //最後から2番目のinputタグを拾う処理 //画像が選択されるinputタグは必ず最後から2番目 var targetFile = $fileListLI.eq(-2); //1画像毎のUPなので[0]、複数である場合は[1][2]... fd.append("file", $(targetFile).prop("files")); $.ajax({ url: "{{action('PortalController@spimgupload')}}", type: 'post', dataType: 'html', data: fd, processData: false, contentType: false }) // 失敗時 .fail(function(jqXHR, statusText, errorThrown){ console.log(jqXHR); alert('エラー発生'); }) // 成功時 .done(function(data, textStatus, jqXHR){ // successImgUpload(); console.log(data); var imgUrl = '{!!storage_path("app/public/cv/")!!}'; if(textStatus == 'success') { alert('succccccceeeeeeessssss!!'); return true; } else { alert(data); return false; } alert('成功したよ'); }); var $input = $(this), $li = $input.closest('.each_file'), $newLi = $li; $fileList.append($newLi); //サムネイル画像を表示する処理 var file = e.target.files[0], fileName = file.name; //FileReaderオブジェクトの生成 reader = new FileReader(); reader.readAsDataURL(file); reader.onloadend = function(){ var fileReader = this; if(fileReader.result){ var thumb = '<div class="thumbnail"><a href="' + fileReader.result + '" class="swipebox"><img src="' + fileReader.result + '" width="100px" style="max-width: 100px;"><input type="hidden" name="id" value="{{request()->input('id')}}"><input type="hidden" name="filename" value="' + fileName + '"></a><span class="delete_btn del-button ui-opaimg">削除</span></div>'; $li.append(thumb); } return this; }; $input.hide(); return this; });
<form method="post" action="{{url('multifileUpload')}}" enctype="multipart/form-data" id="cv_form"> <ul id="file_list"> <li class="each_file"> <label class="bt-photo02 ui-bt-nomal ui-opaimg">添付する <input type="file" id="uploadName" class="input_file" name="img_file[]" value="アップロード" accept="image/*;capture=camera" style="display:none;"> <input type="hidden" name="id" value="{{request()->input('id')}}"> </label> </li> </ul> <!-- <input type="submit" value="画像アップロード"> --> <p><button type="submit" id="submit_btn">送付する</button></p> </form>

ご教授いただければ幸いです。

よろしくお願いいたします。

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

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

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

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

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

kei344

2018/01/23 06:28

「idにあたるもの」は具体的に何の情報でしょうか。
退会済みユーザー

退会済みユーザー

2018/01/23 06:30

数値でございます
kei344

2018/01/23 06:33

どこの要素の何の数値かがわかりません。
x_x

2018/01/23 07:13

コード中にappendが三か所出現していますが、どれのことを言っていますか?
guest

回答2

0

FormDataの考え方

HTML

1<form> 2<input type="text" name="t1" value="123"> 3<input type="text" name="t2" value="456" disabled> 4<input type="hidden" name="h1" value="789"> 5<select name="s1"> 6<option value="1">1</option> 7<option value="2" selected>2</option> 8<option value="3">3</option> 9</select> 10<input type="checkbox" name="c1[]" value="1" checked> 11<input type="checkbox" name="c1[]" value="2" > 12<input type="checkbox" name="c1[]" value="3" checked> 13<input type="radio" name="r1" value="1" checked> 14<input type="radio" name="r1" value="2"> 15<input type="radio" name="r1" value="3"> 16<button type="button">submit</button> 17<textarea name="ta1">ta</textarea> 18</form> 19 20

のようなフォームに対して、以下のように値を得ます

javascript

1$(function () { 2 $("button").on('click', function (e) { 3 var fd=new FormData($(this).prop('form')); 4 for(var item of fd){ 5 console.log(item); 6 } 7 e.preventDefault(); //submitを殺す 8 }); 9}); 10

ただしfor~ofはIEが対応していないため、汎用的に処理するなら
フォームのエレメンツを走査する必要があります

調整版

$(function () { $("button").on('click', function (e) { var f=$(this).prop('form').elements; var n=[]; for(i=0;i<f.length;i++){ if(f.item(i).name && !f.item(i).disabled){ var ty=f.item(i).type; if((ty=="radio" || ty=="checkbox") && f.item(i).checked || ty=="text" || ty=="hidden" || ty=="textarea" || ty=="select-one" ){ n.push([f.item(i).name,f.item(i).value]); } } } console.log(n); e.preventDefault(); }); });

投稿2018/01/23 07:27

編集2018/01/23 09:02
yambejp

総合スコア114585

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

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

yambejp

2018/01/23 07:53 編集

formdataはアクティブなデータのみつかむのに対して formを走査する場合はselectやradio、checkboxの値は selectedやcheckedを参照しながらかつdisabledではないことを 確認してアクティブかどうかをチェックする必要があります (調整版アップデートしておきました)
退会済みユーザー

退会済みユーザー

2018/01/23 09:05

ご回答ありがとうございます。 FormDataについてわかりやすく説明してくださり、誠にありがとうございます。
guest

0

ベストアンサー

回答に誤った情報を記載してしまったため、取り消し線を入れて後ろにコメントした部分を追記しました。

ざっと見た感じでしかないので外してたら申し訳ないのですが、

var fd = new FormData($('#cv_form').get(0));

これだけだと「#cv_formの一番最初の入力コントロール」のみ取得しています。
hiddenに設定しているname="id"も一緒に送りたい場合、.append()で追加してあげる必要があるのではないでしょうか。

javascript

1fd.append("id",$("#id").val()); //hiddenにもidを設定した前提なので書き方はあわせてください

※もっと効率的なやり方はありそうですが、ひとまず。
下記も参考にしてみてください。

回答を一部修正

~.get(0)でform内容は取得可能です。
console.logでformdataを確認するためには以下のように書く必要があります。

console.log(fd.get('body'));

※詳しくは下記記事のコメントへ。

入力コントロールの情報取得はコメントに書いたとおりです。
idを設定してval()で取得するのが記述が少なくすみます(checkboxやradioなどはつけ方やとり方が違うケースがあるので下記を参考にしてください)

投稿2018/01/23 06:34

編集2018/01/23 08:27
m.ts10806

総合スコア80765

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

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

退会済みユーザー

退会済みユーザー

2018/01/23 06:37

ご回答ありがとうございます。 ただ、 var fdの直下に fd.append("id", "88"); と追加しても、console.logではその値を確認することができませんでした。
m.ts10806

2018/01/23 06:40

やはり情報を飛ばした先のurlで確認するのが確実ですね。
退会済みユーザー

退会済みユーザー

2018/01/23 06:40

確認できました! ありがとうございます。 追加で確認させていただきたいのですが、ajaxで飛ばす前にそのidをjquery側で用いることは可能でしょうか?
m.ts10806

2018/01/23 06:42

「ajaxで飛ばす前にそのidをjquery側で用いる」というのがどの範囲でどう利用したいのか教えてください。
退会済みユーザー

退会済みユーザー

2018/01/23 06:51

同じclick function内で用いることを目標としています
m.ts10806

2018/01/23 06:55

ご提示ソースにはclickイベントはどこにも記述されていませんよ。
m.ts10806

2018/01/23 07:02 編集

change.inputFile の中というのであれば、 hidden要素にidを与えておき <input type="hidden" name="id" id="id" value="{{request()->input('id')}}"> javascript側でvalueを取得するような記述を書くのが記述量は少ないですね。 var id = $("#id").val(); 参考: https://itsakura.com/jquery-hidden
退会済みユーザー

退会済みユーザー

2018/01/23 07:15

内容を汲んでくださりありがとうございます。 私が求めていたものと一致しました
m.ts10806

2018/01/23 07:25

解決したようで何よりです。
x_x

2018/01/23 07:54

new FormData(HTMLFormElement)でそのフォームのフォームコントロールはすべて送信されるはずですが、一番最初の入力コントロールというのは何を指していますか?
m.ts10806

2018/01/23 08:12

すみません。よくよく考えたらその通りですね。 勘違いしていました。 コメントで解決に至れたようなので回答修正しておきます。
退会済みユーザー

退会済みユーザー

2018/01/23 08:16

x_x様 仰る通り、appendがなくてもajax実行後で確認することができました。 ご回答、ご指摘ありがとうございます。
x_x

2018/01/23 08:23

もう一つ。そのQiitaのコメントでも指摘されていますが、Ajax送信の有無は関係ありません。最後まで読むことをお勧めします。
m.ts10806

2018/01/23 08:28

ありがとうございます。記事確認が疎かになっておりました。 ご指摘の箇所を確認し、回答修正しました。
退会済みユーザー

退会済みユーザー

2018/01/23 09:04

ご修正ありがとうございます。 参考になる資料を多数いただけて助かります
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問