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

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

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

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

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

2回答

18341閲覧

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

YorihiroKatsuki

総合スコア70

jQuery

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

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2016/06/22 16:21

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への画像パスの登録は成功しております。
以下コードになります

html

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

javascript

1$('#upload').click(function(){ 2 3 //フォームのデータを変数formに格納 4 var form = $('#listing_image_form').get()[0]; 5 6 //FormData オブジェクトを作成 7 var formData = new FormData( form ); 8 9 $.ajax({ 10 url:'listing_manage_save.php' 11 method:'post', 12 dataType:'json', 13 //dataにFormDataを指定 14 data:formData, 15 // Ajaxがdataを整形しない指定 16 processData:false, 17 // contentTypeもfalseに指定 18 contentType:false 19 }).done(function(data){ 20 21 //data内の改行コードを消す 22 var img_file_path = data.replace(/\r?\n/g,""); 23 24 //改行を消したデータ html に入れる 25 var img_src = $('<img>').attr({ 26 src: img_file_path, 27 style: "width:200px; height:150px;" 28 }); 29 30 $('#img_file_disp_add').html(img_src); 31 32 33 }).fail(function( jqXHR, textStatus, errorThrown){ 34 console.log( 'ERROR', jqXHR, textStatus, errorThrown); 35 }); 36 37 return false; 38});

PHP

1date_default_timezone_set('Asia/Tokyo'); 2 if($_FILES["upfile"]["tmp_name"] && $_FILES["upfile"]["size"] > 0){ 3 4 5 //$_FILESの各要素を変数に代入する.getimagesizeは画像情報を取得する 6 list($w,$h,$type,$attr) = getimagesize($_FILES["upfile"]["tmp_name"]); 7 8 //画像のタイプに応じて拡張子をつける 9 switch ($type) { 10 case IMAGETYPE_JPEG: 11 $extention = '.jpg'; 12 break; 13 case IMAGETYPE_PNG: 14 $extention = '.png'; 15 break; 16 case IMAGETYPE_GIF: 17 $extention = '.gif'; 18 break; 19 } 20 21 //拡張子がついた場合、画像のファイル名をつけ、画像を移動させるためのファイルパスを指定する 22 if($extention){ 23 $file_name = date("YmdHis").$extention; 24 $img_file_path = "image/listing_photos/$file_name"; 25 26 //echo $file_name,'<br>'; 27 //echo $img_file_path; 28 29 30 //画像ファイルを指定フォルダに移動させる 31 move_uploaded_file($_FILES["upfile"]["tmp_name"],"$img_file_path"); 32 }else{ 33 34 //拡張子がつかなかった場合、エラーメッセージを出す 35 echo "指定したファイルは画像ファイルではありません"; 36 exit; 37 } 38 39 40 //サーバーに保存した画像ファイルのパスをDBにも保存する(後で表示出来るように) 41 $sql = "insert into listing_image_info (list_id,img_file_path) values(?,?)";//preareの時はbindを使う!! 42 $stmt = $dbh->prepare($sql); 43 $stmt->execute(array($list_id,$img_file_path)); 44 45 $sql = "select * from listing_image_info where list_id = ?;"; 46 $stmt = $dbh->prepare($sql); 47 $stmt->execute(array($list_id)); 48 $result_img = $stmt->fetchAll(PDO::FETCH_ASSOC); 49 50 echo $img_file_path; 51 52 53 }

宜しくお願い致します。

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

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

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

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

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

guest

回答2

0

ベストアンサー

javascript

1$.ajax({ 2 url:'listing_manage_save.php' 3 method:'post', 4 dataType:'json', 5 //dataにFormDataを指定 6 data:formData, 7 // Ajaxがdataを整形しない指定 8 processData:false, 9 // contentTypeもfalseに指定 10 contentType:false 11 })

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

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

投稿2016/06/22 16:30

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

YorihiroKatsuki

2016/06/22 16:41

ありがとうございます!! データ形式をjsonに変えることでうまくいきました!! (以下を追加しました)  header('Content-Type: application/json; charset=utf-8');  echo json_encode($img_file_path); 一番早く回答して下さったのでベストアンサーに選ばせて頂きました^^
退会済みユーザー

退会済みユーザー

2016/06/22 16:44

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

2016/06/22 18:13

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

退会済みユーザー

2016/06/22 18:27

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

2016/06/22 19:41

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

0

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

投稿2016/06/22 16:29

kei344

総合スコア69357

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

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

YorihiroKatsuki

2016/06/22 16:42

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問