(48772番の質問の続きです)
PHPおよびjQueryの勉強のため、Ajax通信を用いて画像ファイルのアップロードを行うファイルとして以下のソースのhtml・phpファイルを作成しました。しかし、Ajax通信が上手くできていないようです。
このHTMLで送信しようとすると、.fail(function(jqXHR, textStatus, errorThrown)が呼び出され、コンソールに次のように表示されます。
fail [object File] 200 parsererror SyntaxError: Unexpected token < in JSON at position 0
PHPファイルからのレスポンスを確認すると、
<br />
<b>Notice</b>: Undefined index: upfile in <b>C:\xampp\htdocs\samplephp\uploader.php</b> on line <b>4</b><br />
<br />
<b>Notice</b>: Undefined index: upfile in <b>C:\xampp\htdocs\samplephp\uploader.php</b> on line <b>5</b><br />
null
が返っていることが分かりました。
Noticeの内容やJSONとして返ってほしい部分がnullになっていることから、
ファイルのデータの送信の際に問題が発生しているようです。
console.log(fd.get("upfile"));では、コンソールに以下のように表示されるので、
FormDataの作成自体は成功していると考えています。
File {name: "xxx.jpg", lastModified: 1468386651618, lastModifiedDate: ...(以下省略)}
データが正常に送信されていない理由について、どなたかご教授いただけるとありがたいです。
(追記)
リクエストを確認すると
------WebKitFormBoundary6eW1Yx2avtnUkxWu
Content-Disposition: form-data; name="upfile"; filename="xxx.jpg"
Content-Type: image/jpeg
と表示されていました。送信したデータがJSONになっていないということでしょうか。
###ソースコード
ファイル送信側のHTMLファイル:
HTML
1<meta charset="utf-8"> 2<script type="text/javascript" language="javascript" src="jquery/jquery-3.1.0.min.js"></script> 3 4<script type="text/javascript"> 5 6 if(window.FormData){ 7 console.log("FormDataに対応している"); 8 }else{ 9 console.log("FormDataに対応していない"); 10 } 11 12 jQuery(function(){ 13 jQuery("#file_upload_form").submit(function(){ 14 var fd = new FormData(document.getElementById("file_upload_form")); 15 console.log(fd.get("upfile")); 16 jQuery.ajax({ 17 url: "uploader.php", 18 type: "POST", 19 data: fd, 20 cache: false, 21 processData: false, 22 contenttype: false, 23 dataType: 'json' 24 }) 25 .done(function(data, textStatus, jqXHR){ 26 console.log("success " + data); 27 alert(data); 28 }) 29 .fail(function(jqXHR, textStatus, errorThrown){ 30 console.log("fail " + fd.get("upfile") + " " + jqXHR.status+ " " + textStatus+ " " + errorThrown); 31 alert("fail"); 32 }); 33 return false; 34 }); 35 }); 36 37</script> 38 39<form id = "file_upload_form" enctype="multipart/form-data" method="post" name="file_upload_form"> 40 ファイル: 41 <input type="file" name="upfile" id="upfile"> 42 <input type="submit" value="アップロードする" id="upload_file_button"> 43</form>
ファイルを受信し、アップロードするPHPファイル(uploader.php):
PHP
1<?php 2 header('Content-Type: application/json; charset=utf-8');//JSON形式で出力する 3 $updir = "./upload/"; 4 $filename = $_FILES['upfile']['name']; 5 if(move_uploaded_file($_FILES['upfile']['tmp_name'],$updir.$filename)==FALSE) 6 { 7 echo json_encode($filename); 8 } 9 else{ 10 echo json_encode($filename); 11 } 12?>
回答1件
あなたの回答
tips
プレビュー