Ajaxを使ったところUnexpected token i in JSON at position 4(…)というエラーが発生しました

Question

input fileで選択した画像データをajaxを使って非同期でDBに登録して、かつhtml内にその画像を表示したいのですが、ajaxの部分で以下のようなエラーが発生します。

ERROR
Object {readyState: 4, responseText: "↵↵↵↵image/listing_photos/20160623010254.jpg", status: 200, statusText: "OK"}
Unexpected token i in JSON at position 4(…)

こちらの原因・解決策を教えて頂けますでしょうか？
ちなみに、DBへの画像パスの登録は成功しております。
以下コードになります

 <!--フォーム-->
<form id="listing_image_form" class="form-group" action="" method="POST" enctype="multipart/form-data">
<input class="form-control" type="file" id="upfile" accept="image/*" capture="camera" name="upfile" size="50" required>
<input type="hidden" name="MaxFileSize" value="5000000">
<input class="form-control" id="upload" type="submit" name="upload" value="保存">
 <!--画像挿入用-->
<p id="img_file_disp_add" style="float:left; margin:10px 10px;"></p>

$('#upload').click(function(){

	//フォームのデータを変数formに格納
	var form = $('#listing_image_form').get()[0];

	//FormData オブジェクトを作成
	var formData = new FormData( form );

	$.ajax({
		url:'listing_manage_save.php'
		method:'post',
		dataType:'json',
		//dataにFormDataを指定
		data:formData,
		// Ajaxがdataを整形しない指定
		processData:false,
		// contentTypeもfalseに指定
		contentType:false
	}).done(function(data){

		//data内の改行コードを消す
		var img_file_path = data.replace(/\r?\n/g,"");

		//改行を消したデータ html に入れる
    	var img_src = $('<img>').attr({
    		src: img_file_path,
    		style: "width:200px; height:150px;"
		});

		$('#img_file_disp_add').html(img_src);
		

	}).fail(function( jqXHR, textStatus, errorThrown){
		console.log( 'ERROR', jqXHR, textStatus, errorThrown);
	});

	return false;
});

date_default_timezone_set('Asia/Tokyo');
	if($_FILES["upfile"]["tmp_name"] && $_FILES["upfile"]["size"] > 0){


		//$_FILESの各要素を変数に代入する.getimagesizeは画像情報を取得する
		list($w,$h,$type,$attr) = getimagesize($_FILES["upfile"]["tmp_name"]);

		//画像のタイプに応じて拡張子をつける
		switch ($type) {
			case IMAGETYPE_JPEG:
				$extention = '.jpg';
				break;
			case IMAGETYPE_PNG:
				$extention = '.png';
				break;
			case IMAGETYPE_GIF:
				$extention = '.gif';
				break;
		}

		//拡張子がついた場合、画像のファイル名をつけ、画像を移動させるためのファイルパスを指定する
		if($extention){
			$file_name = date("YmdHis").$extention;
			$img_file_path = "image/listing_photos/$file_name";
	
			//echo $file_name,'<br>';
			//echo $img_file_path;
		
			
		//画像ファイルを指定フォルダに移動させる
			move_uploaded_file($_FILES["upfile"]["tmp_name"],"$img_file_path");
		}else{
		
		//拡張子がつかなかった場合、エラーメッセージを出す
			echo "指定したファイルは画像ファイルではありません";
			exit;
		}


		//サーバーに保存した画像ファイルのパスをDBにも保存する(後で表示出来るように)
		$sql = "insert into listing_image_info (list_id,img_file_path) values(?,?)";//preareの時はbindを使う！！
		$stmt = $dbh->prepare($sql);
		$stmt->execute(array($list_id,$img_file_path));

		$sql = "select * from listing_image_info where list_id = ?;";
		$stmt = $dbh->prepare($sql);
		$stmt->execute(array($list_id));
		$result_img = $stmt->fetchAll(PDO::FETCH_ASSOC);

		echo $img_file_path;


	}

宜しくお願い致します。

Answer 1

$.ajax({
        url:'listing_manage_save.php'
        method:'post',
        dataType:'json',
        //dataにFormDataを指定
        data:formData,
        // Ajaxがdataを整形しない指定
        processData:false,
        // contentTypeもfalseに指定
        contentType:false
    })

json で受け取ろうとしているのに、

listing_manage_save.php において json形式で出力していないのが原因でしょう。

Comments

[YorihiroKatsuki]

ありがとうございます！！
データ形式をjsonに変えることでうまくいきました！！
(以下を追加しました)
　header('Content-Type: application/json; charset=utf-8');
　echo json_encode($img_file_path);

一番早く回答して下さったのでベストアンサーに選ばせて頂きました^^

[退会済みユーザー]

そこだけじゃ不十分ですね。エラーの時、JSON形式になりませんよ。

[YorihiroKatsuki]

ありがとうございます！そうなんですね。
もし可能であれば、エラーの際にもJSON形式にする方法を教えて頂けませんでしょうか。
もし時間がかかるということであれば、参考URLなど教えて頂けますと幸いです。

[退会済みユーザー]

return と同じように　echo "指定したファイルは画像ファイルではありません";　の部分もjson_encode を通せば済むことです。

[YorihiroKatsuki]

なるほど！
ありがとうございました！
参考になりました^^

Answer 2

dataType:'json', と指定していますが、PHPからはテキストで返っているからではないでしょうか。
PHPでJSONにして返すか、dataType:'text', にすれば解決できそうな気がします。

Comments

[YorihiroKatsuki]

ありがとうございます！！
json形式に変えたら一発で上手くいきました。
的確なご回答ありがとうございました！