jQuery で FormData() に .append() しても、PHPで一部しか受け取ることができません

Question

###実現したいこと
画像アップロード機能を実装しています。画像以外のデータをPHPで受け取りたいです。

###発生している問題
以下のようにFormData()に.append()しているのですが、PHPで受け取れるのはfileだけで、それ以降にapend()したはずのprocessやacitonが受け取れません。

###該当のソースコード
このPHPですが、resに向かってemptyを返してしまうのが問題です。

function my_ajax_upload_photos() {

	$file    = $_FILES['file']    ?? '';
	$process = $_FILES['process'] ?? '';
	
	if( $file === '' || $process === '' ) die('empty');	

	// 受け取った値がきちんとあればこれ以降の処理を実行していく
}

上記PHPに送っているjQueryはこちらになります。

<input type="file" class="input_file" name="img_file" value="" accept="image/*">

$(document).on('change','.input_file', function(e){
	console.log('ファイルが選択されました');
	const file = e.target.files[0];
	
	// FileReader オブジェクト
	let reader = new FileReader();
	reader.readAsDataURL(file);
	reader.onloadend = function(){
		const fileReader = this;
		const base64_str = fileReader.result || '';
		if( base64_str ){
			const type = file.type;
			if( type === 'image/jpeg' || type === 'image/png' ){
				$('img.target').attr( 'src', base64_str ); // 選択画像を表示
			}else{
				console.log('画像じゃないとダメです');
			}
		}
	};

	// 送信データ
	let fd = new FormData();	
	fd.append( 'file', file );
	fd.append( 'action', 'my_ajax_upload_photos' ); 
	fd.append( 'process', 'default' );
	
	// 保存
	$.ajax({
		url: 'http://...',
		type: 'POST',
		data: fd,
		processData: false, 
		contentType: false
	})
	.done(function(res){
		c('res=', res); // die('empty') されてしまう
	})
	.fail(function(XMLHttpRequest, textStatus, errorThrown) {
	});
});

###試したこと
$_FILES['file']だけならできました。
なので、もしかしたら$_FILESで送れるのは一つだけなのかと考えました。
そこで、append()を一つだけにして、まとめてfilesというオブジェクトで送ってみました。

$(document).on('change','.input_file', function(e){
	console.log('ファイルが選択されました');
	const file = e.target.files[0];

	// FileReader オブジェクト
	/*---- 
	同上
	-----*/

	// 送信データ
	let fd = new FormData();	
	const files = {
		file   : file,
		action : 'my_ajax_upload_photos',
		process: 'default'
	};	
	fd.append( 'files', files );

	// 保存	
	/*---- 
	同上
	-----*/
});

でPHPもfilesの１つだけを受け取ったのですが、こうするとJSのresに向かって何かが返ることもなく400エラーとなってしまいます。

function my_ajax_upload_photos() {

	$files   = $_FILES['files']   ?? '';
	$file    = $files['file']     ?? '';	
	$process = $files['process']  ?? '';
	
	if( $file === '' || $process === '' ) die('empty');	

	// 受け取った値がきちんとあればこれ以降の処理を実行していく
}

どのようにしましたら、FormData()に.append()した複数の値をPHPで受け取ることができるでしょうか。
ご回答どうぞ宜しくお願いいたします。

Answer 1

fd.append( 'action', 'my_ajax_upload_photos' ); 

fd.append( 'process', 'default' );

も

    action : 'my_ajax_upload_photos',

    process: 'default'

もファイルではなく文字列を送ってるので
type: 'POST',なら$_POSTです。

外部から来る変数

ファイルは$_FILESで良いです。

Comments

[kikijiji]

なるほど…！どうもありがとうございます。

[m.ts10806]

JavaScript関係なく、まずはPHPで単純なフォーム送信作られては。