jQueryでFormData()を送っても、PHPでinputの値が受け取れません

Question

###実現したいこと
こちらの<form>で画像が選択できる機能がjQueryであるのですが、その選択された画像（inputのimg_file）を送り、PHPで受け取りたいです。

<form class="testform">
	<ul id="file_list">
		<li class="each_file">
			<input type="file" class="input_file" name="img_file" value="" accept="image/*">
		</li>
	</ul>
	<input type="submit" id="submit_btn" value="画像アップロード">
</form>	

###発生している問題
$_FILES['img_file']がPHPで受け取れません。

そのことは次のPHPにある通りecho json_encode($_FILES['img_file']);としてみたのですが、jQeuryでres=という風にコンソールに表示され、つまり何も返ってこなかったためにそう判断しました。

###該当のソースコード

function my_ajax_upload_photos() {
	echo json_encode($_FILES['img_file']); 
	die();
}

$(document).on("click",".insert_testform", function(){
	insert_testform(); 
});

function insert_testform(){
	// フォームのHTMLを追加
	const testform = `
		<form class="testform A_UploadImg">
			<ul id="file_list">
				<li class="each_file">
				<input type="file" class="input_file" name="img_file" value="" accept="image/*">
				</li>
			</ul>
			<input type="submit" id="submit_btn" value="画像アップロード">
		</form>	
	`;
	$('body').prepend(testform);

	// 削除がクリックされた場合の処理
	let $fileList = $('#file_list');
	$fileList.on('click.deleteFile', '.delete_btn', function(){
		const $li = $(this).closest('.each_file');
		$li.remove();
		// inputタグ数が4つ未満になった場合に再度表示させる処理
		const $fileListLI = $('#file_list li input[name=img_file]');
		const inputFileNum = $fileListLI.length;
		// 最後のinputタグを表示する処理
		const lastInputFile = $fileListLI.eq(-1);
		if (inputFileNum < 4){
			$(lastInputFile).show();
		}
		return false;
	});

	// inputタグに画像が追加された場合の処理
	$fileList.on('change.inputFile', '.input_file', function(e){
		const $input = $(this);
		const $li    = $input.closest('.each_file');
		const $newLi = $li.clone();
		$fileList.append($newLi);
		
		// サムネイル画像を表示する処理
		const file = e.target.files[0];
		const fileName = file.name;
		
		// FileReaderオブジェクトの生成
		let reader = new FileReader();
		reader.readAsDataURL(file);
		
		reader.onloadend = function(){
			const fileReader = this;
			if(fileReader.result){
				const thumb = '<div class = "thumbnail"><img src = "' + fileReader.result + '" width = "150px" style = "max-width: 150px;">' + fileName + '<button class = "delete_btn">削除</button></div>';
				$li.append(thumb);
			}
			return this;
		};
		$input.hide();

		// 送信データ
		let fd = new FormData();
		fd.append( "file", $('input[name="img_file"]').prop("files")[0] );
		const ajax_action = "my_ajax_upload_photos";	
		fd.append( 'action', ajax_action ); // FormData を送る場合は送信内容をすべてそこに入れる (https://stackoverflow.com/questions/28002627/ajax-response-0-when-using-processdata-and-contenttype-input-file)

		$.ajax({
			url: 'http://...',
			type: 'POST',
			dataType: 'json',
			data: fd,
			// FormData を送る場合は processData と contentType が必要
			processData: false, 
			contentType: false
		})
		.done(function(res){
			c('res=', res);
		})
		.fail(function(XMLHttpRequest, textStatus, errorThrown) {
			ajax_fail_console(XMLHttpRequest, textStatus, errorThrown);	
		});
		//return this; // なんでここでretunしてるの？
	});
}

そしてAJAXの結果のresとして次がコンソールに表示されました。何も返ってこないようです。

res=

###試したこと
上の$_FILES['img_file']でなく、そもそもの$_FILESを返してみました。

function my_ajax_upload_photos() {
	//echo json_encode($_FILES['img_file']); 
	echo json_encode($_FILES); // そもそもの`$_FILES`を返してみました。
	die();
}

そうして先ほどのjQueryの$.ajaxの結果のresは次のようになり、ここを見ると$_FILES['img_file']がないようだとわかりました。

res={
  file: {
    error: 0
    name: "gahag-011076.jpg"
    size: 22963
    tmp_name: "/tmp/phpZFj7sW"
    type: "image/jpeg"
  }
}

ということは、jQeuryのfd.append( "file", $('input[name="img_file"]').prop("files")[0] );が疑わしいと思い、これをコンソールに出してみました。

fd.append( "file", $('input[name="img_file"]').prop("files")[0] );
console.log( 'files=', $('input[name="img_file"]').prop("files")[0] );

そうして出た結果が次のものです。

files=File { 
  lastModified: 1591546547257,
  name: "gahag-011076.jpg",
  lastModified: 1591546547257,
  webkitRelativePath: "",
  size: 22963,
  type: "image/jpeg"
}

これをfd.appendとして送る先のjQueryは間違っているのでしょうか？
なにかのネット記事でこう指定していた（コンソールがこの値かはわかりませんがfd.append( "file", $('input[name="img_file"]').prop("files")[0] );のように指定していました）ので、何がいけないのかわからないのです。

さらに別の記事ではfd.append( "file", $('.testform').get(0) );という風な指定もあり試したのですが、その状態で同じようにecho json_encode($_FILES);を返すと、今度はjQeuryのresが次のように空の配列となりまして、何をしてもわからないでいます。

res=Array[]

夜分に長文で申し訳ございませんが、どなたかご助力頂けませんでしょうか。
宜しくお願い致します。

Answer 1

appendするときにキー名を"file"にしているからresでfileになるのでは？
"img_file"にすればいいと思います。new FormData()と
appendでカスタマイズしたFormDataを送るときはinputのnameは無意味だったはず。

fd.append( "file", $('input[name="img_file"]').prop("files")[0] );
fd.append( "img_file", $('input[name="img_file"]').prop("files")[0] );

Comments

[kikijiji]

>appendでカスタマイズしたFormDataを送るときはinputのnameは無意味だったはず
大当たりです。一晩憔悴しました。どうもありがとうございます。

Answer 2

formタグにつけるおまじないが抜けてます。

Comments

[kikijiji]

そちらは特に不要ではないでしょうか？
具体的にどれを指すのかいまひとつ把握しきれていませんが、
<form enctype="multipart/form-data" method="post" name="fileinfo">
の３つのデータ属性ですよね？なくても動作するかと思いますが、まずいですか？

[m.ts10806]

ファイルアップロードならenctypeは必須です。

[kikijiji]

しかし質問のコード（をsousuke様のご回答で修正したもの）では、enctypeはないままでアップロードできていまして…なんでしょうね…。

[sousuke]

formタグ自体不要ですよこのやり方だと。
formオブジェクトからsubmitしていればformタグに要ると思いますが
今は$.ajaxで直接postしているのでformタグに属性をどれだけ書いても関係ないです。
むしろこの属性を書くとsubmitとクリックイベントの$.ajaxで２重にpostするようになると思います。
ややこしいので<input type="submit" id="submit_btn" value="画像アップロード">
を<button type="button" id="submit_btn">画像アップロード</button>みたい感じに変えたほうがいいと思います。

[kikijiji]

ご親切にどうもありがとうございます！助かります！確かにajaxのpostはformタグを参照するわけではないですもんね。仰る通りformタグはややこしいので外し、inputもbuttonに変えておきたいと思います。

[m.ts10806]

確かにそうですね。
あまりスポットでそこだけアップロードすることがないので気づきませんでした。
(Ajaxアップロードするときはたいていtype=fileをhiddenにした別formに入れてました)