jqueryのajax通信で送られてきたCSVをPHP側で見れない

Question

前提・実現したいこと

input type=fileで選択したcsvをajaxでPHPに送り、PHPでそのcsvを非同期で処理したいと思っています。
しかし、その送られてきたファイルをPHPでfile_get_contents()しても返り値がnullになります。
現段階では、送られてきたCSVの中身を文字列ないし、fgetcsv()で扱えるようになりたいです。
submitは使えない前提です。

発生している問題

PHP側のファイルの扱い方が間違っているのか、JS側のajax通信の仕方が間違っているのか、ファイルの中身を取得出来ません。
現在、PHP側を試しに下記のようなコードにしています。
js側でconsole.log()にてこのfile_get_contents($fp)の返り値を見るとnullになっておりました。

$tmp_name = $_FILES['file']['tmp_name'];
$fp = fopen($tmp_name, 'rb');
header('Content-type: application/json');
echo file_get_contents($fp);

js->phpのリクエスト自体は200で成功しています。
下記が送信したフォームデータをChromeの開発者モードで見たものです。

file: (binary)
flag: csvUpload
pid: 1

該当のソースコード

<div class="form-group">
    <input type="file" class="form-control-file" id="csvFile" accept="text/csv">
</div>
<div class="form-group">
    <button type="button" class="btn btn-success" id="uploadBtn">アップロード</button>
</div>

$(document).on('click','#uploadBtn',function(){
	var fd = new FormData();
	fd.append("file", $("#csvFile").prop("files")[0]);
	fd.append("flag", "csvUpload");
	$.ajax({
		url : phpのurl,
		type: "POST",
		dataType: "json",
		data: fd,
		processData: false,
		contentType: false
	})
	.done(function(data){
		console.log(data);
	})
	.fail(function(jqXHR){ 
		console.log(jqXHR);
	});
})

$res = array("status"=>"error","data"=>"");
if($_REQUEST["flag"] == 'csvUpload') {
    $tmp_name = $_FILES['file']['tmp_name'];
    $fp = fopen($tmp_name, 'rb');

    $res["data"]["filecontents"] = file_get_contents($fp);
    $res["data"]["filepath"] = $tmp_name;

    // 処理中略, ファイル処理が成功すれば$res["status"] = "success"

    header('Content-type: application/json');
    echo json_encode($res);
    exit();
}

補足情報

php v7.0.31
jQuery v2.1.4
使用想定ブラウザ Chromeのみ

Answer 1

まずは普通にpostして読めるかどうかを検証するのが先。
ファイルポインタで掴んでるのに、file_get_contentしているのはなぜでしょう？
csvファイルを読んでいるのにjsonを返そうとしているのもおかしいです

Comments

[yambejp]

$tmp_name = $_FILES['file']['tmp_name'];
$fp = fopen($tmp_name, 'rb');
header('Content-type: application/json');
while(!feof($fp)){
echo $data=fread($fp,1024);
}
fclose($fp);

[zepp]

> ファイルポインタで掴んでるのに、file_get_contentしているのはなぜでしょう？
ああ…file_get_contentの第一引数はファイル名ですよね…
書き間違いに気づけました、ありがとうございます。

> csvファイルを読んでいるのにjsonを返そうとしているのもおかしいです
なぜおかしいのでしょう？

[yambejp]

CSVはJSONではないですから・・・
CSVを受け取って表示するならヘッダは
header('Content-Type: text/csv ');
とか
header('Content-Type: text/csv ;charset=xxxx');
とすべきです。

[zepp]

PHPが受け取るのはCSVですけど、返すのは最終的にCSVじゃないので大丈夫ですー

[yambejp]

つまりCSVをそのまま出力しようとしている命題が間違えているということですね？
CSVを配列やオブジェクトに展開して、JSONエンコードして出力してください

[zepp]

> 送られてきたCSVの中身を文字列ないし、fgetcsv()で扱えるようになりたいです。
命題これっすねー。
一応本文には書いてたんですが、タイトルと齟齬がありましたね。
修正してみました。
勘違いさせてしまって申し訳ありません。

Answer 2

PHP は知らない自分がレスするのもなんですが・・・

CSV ファイルは期待通りに送信されてますか？

質問のコードに、

fd.append("file", $("#csvFile").prop("files")[0]);

とあって、これが CVS ファイルを append したつもりですか？　ここが変だと思います。

質問に <input type="file" ... というコードがありますが、ユーザーがそれで送信するファイルを選択し、<button type="button" ... クリックで jQuery ajax を使ってアップロードするのですよね？

であれば、var fd = new FormData(document.querySelector("form")); で送信するファイルが含まれた FormData オブジェクトを取得できるので、それを jQuery ajax の data に設定すれば multipart/form-data 形式で送信されるはずです。

もちろん、form 要素の enctype 属性に "multipart/form-data" が設定されていなければなりませんが。

Fiddler を使って期待通り送信できているか調べてみてはいかがですか？

そのあたりの話は、別のスレッドの私の回答 https://teratail.com/questions/277964#reply-395868 に書きましたので見てください。

Comments

[zepp]

> これが CVS ファイルを append したつもりですか？　ここが変だと思います。
CSVファイルは期待通りにappendされてました

[退会済みユーザー]

それは失礼しました。

Answer 3

echo json_encode($res);
exit();

の部分を

return json_encode($res);

としてはいかがでしょうか？

理由は以下の通りです。
jsファイル内の

.done(function(data){
        console.log(data);
    })

のdataはajaxのポスト送信の返り値を表しています。
一方PHPファイルで使用されているechoはreturnとは違い返り値を返すものではない(返り値はnullとなる)し、exit()を使用すると返り値自体がnullととなります。
よって、PHP側の返り値の値を返すreturnをPHPファイル内で使用することでjsファイルのdataもnullにならないと思うからです。

参照
PHPドキュメント　echo
PHPドキュメント　exit

追記
自分が作成したこの回答はPHPのheader()の用途を完全に勘違いしたものでした。なのでこの回答は参考にしないでください。