🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

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

Q&A

解決済

2回答

1348閲覧

ajaxで何も送信されない

TeamPassionall

総合スコア80

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

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

0グッド

1クリップ

投稿2019/10/01 08:38

編集2019/10/02 01:55

javascript と、php で、iphoneのインカメラの画像をサーバーに保存するプログラムを組んでいます。
ですが、~~ajaxでpostしてるのに、phpでは何も受け取っていません。
~~(追記2参照)
どこが原因か教えて下さい…

html

1<!DOCTYPE html> 2<html> 3<head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <style> 6#img { 7 width: 400px; 8 height: 300px; 9} 10</style> 11 <title>テストページ</title> 12</head> 13<body> 14 <h2>Video</h2> 15 <video id="camera" autoplay ></video> 16 <button id="start">start</button> 17 <h2>Canvas</h2> 18 <canvas id="canvas"></canvas> 19 <h2>Img</h2> 20 <img id="img"> 21<textarea id= "scr"></textarea> 22<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 23 <script type="text/javascript"> 24$(function() { 25 const medias = { 26 audio: false, 27 video: { 28 facingMode: "user" // フロントカメラにアクセス 29 } 30}; 31const video = document.getElementById("camera"); 32const promise = navigator.mediaDevices.getUserMedia(medias); 33 34promise.then(successCallback) 35 .catch(errorCallback); 36 37 38function successCallback(stream) { 39 video.srcObject = stream; 40}; 41 42function errorCallback(err) { 43 alert(err); 44}; 45 $("#start").click(function() { 46 47 var canvas = document.getElementById('canvas'); 48 //canvasの描画モードを2sに 49 var ctx = canvas.getContext('2d'); 50 var img = document.getElementById('img'); 51 52 //videoの縦幅横幅を取得 53 var w = video.offsetWidth; 54 var h = video.offsetHeight; 55 56 //同じサイズをcanvasに指定 57 canvas.setAttribute("width", w); 58 canvas.setAttribute("height", h); 59 60 //canvasにコピー 61 ctx.drawImage(video, 0, 0, w, h); 62 //imgにpng形式で書き出し 63 img.src = canvas.toDataURL('image/png'); 64 65 //var req = new XMLHttpRequest(); 66var base64 = window.btoa(canvas.toDataURL('image/png')); 67var request = new XMLHttpRequest(); 68request.open("post", "./up.php", true); 69request.onload = function (event) { 70 if (request.readyState === 4) { 71 if (request.status === 200) { 72 //document.getElementById("scr").textContent = con; 73document.getElementById("scr").textContent = request.responseText; 74// => "OK" 75 } else { 76 document.getElementById("scr").textContent = request.statusText; // => Error Message 77 } 78 } 79}; 80request.onerror = function (event) { 81 document.getElementById("scr").textContent = event.type; // => "error" 82}; 83var con = "'file'='" + base64 + "'"; 84request.send(con); 85 86//req.open('POST', 'up.php', true); 87//req.send('file=' + base64); 88 89 90 91 }); 92}); 93</script> 94</body> 95</html>

php

1<?php 2print_r($_POST); 3//消さないで 4// 一時アップロード先ファイルパス 5$img = $_POST["file"]; 6$img = str_replace('data:image/png;base64,', '', $img); 7$img = str_replace(' ', '+', $img); 8$fileData = base64_decode($img); 9 10// 正式保存先ファイルパス 11$file_save = './img/'.date("Y.m.d.H.i.s").'.png'; 12 13// ファイル移動 14$result = @move_uploaded_file($fileData, $file_save); 15if ( $result === true ) { 16 echo "UPLOAD OK"; 17} else { 18 19if(isset($img)){ 20 echo "UPLOAD NG noimg"; 21}else{ 22echo "UPLOAD NG"; 23} 24} 25

phpの出力

Array(
)
UPLOAD NG noimg

追記
Iphoneで作業しているため、デペロッパーツールが使えません。そのため、erudaというライブラリを使って調べた結果、up.phpにpost送信されているデータ量が45バイトしかありませんでした。
原因を教えていだだけたら嬉しいです。

追記2
setRequestHeader('Content-Type' ,
'application/x-www-form-urlencoded; charset=UTF-8')
の一文が抜けてました。
これを記入すると、postが認識されました。
また、phpのコードで、
!isset($img)
と、しなければならないところで、!が抜けていたため、まるでデータが送られてないと勘違いしておりました。すみません。
データはきちんと送られていたようです。

ですが、送られてきたデータを画像化して、アップロード 出来ません。何もエラーは出ないです。

postの詳細

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

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

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

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

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

yambejp

2019/10/01 08:56

どこまで動いています? canvasにデータは表示されますか? canvasデータのbase64変換はされていますか? post処理canvas以外なら成功しますか?
FKM

2019/10/01 09:36 編集

PHP文、いきなりprint_r($_POST)してますがそこでレスポンス返してしまいますよ。しかも配列に対する対処が何もしてないので、このままだとどのみちエラーになります。 ブラウザのコンソールなどで、レスポンスOKのステータスコード200を確認できているか、そしてpost内のデータが入っているか追跡した方がいいと思います。
TeamPassionall

2019/10/01 11:08

>どこまで動いています? POST送信されますが中身が何も無いです。その他は思い通りに動いてます。 >canvasにデータは表示されますか? されます。canvasとimg共にです。 >canvasデータのbase64変換はされていますか? 変数conを表示させて、変換されているのを確認しました。 >post処理canvas以外なら成功しますか? これは普通のフォームのpostなら受け取れるかということですか?それなら受け取れます。
Lhankor_Mhy

2019/10/01 11:47 編集

MimeType はどうなっていますか? 送信時のURLパラメタとbody部についてもご提示いただけますか?
TeamPassionall

2019/10/01 23:59

通信の詳細画像を追加しました。
FKM

2019/10/02 00:04

post_max_size > 転送しようとしている画像サイズ になってますか?デフォルトでは2MBまでしか転送できないので、php.iniの設定を変える必要があるかも知れません。
Lhankor_Mhy

2019/10/02 00:24

リクエストのデータは見れないのですね……、わかりました。 PHP は詳しくないのですが、$_POST で受け取るデータはパラメータ形式のものではなかったかと思います。 この送信は、file="..." という文字列が body に入りそうな気がするのですが、そのあたりはいかがでしょうか?
TeamPassionall

2019/10/02 00:26

post_max_size = 2048M になってますがこれで大丈夫ですか?
TeamPassionall

2019/10/02 00:48

>この送信は、file="..." という文字列が body に入りそうな気がするのですが、そのあたりはいかがでしょうか? そうしたいです。
Lhankor_Mhy

2019/10/02 00:51

> そうしたいです。 たぶんそうなっています。 なので、$_POST では受け取れないのでは、と書いています。 この推測が正しいのかどうか、検証をご検討いただけますか?
Lhankor_Mhy

2019/10/02 02:45 編集

質問追記拝読。 やはりそうでしたか、検証ありがとうございます。 --- var base64 = window.btoa(canvas.toDataURL('image/png')); とありますが、btoa は blob から base64 に変換する関数だと思うのですが、これで合っていますか?
Lhankor_Mhy

2019/10/02 03:03

あ、解決してたんですね。やはりこれも原因でしたか。 ご解決されて何よりです。
guest

回答2

0

自己解決

move_upload_fileを以下のコードに置き換えたら成功しました

php

1imagesavealpha($img, TRUE); 2$result = imagepng($img ,$file_save);

また、base64エンコードを重ねて行っていたのも原因でした。

ありがとうございました。

投稿2019/10/02 02:38

TeamPassionall

総合スコア80

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

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

yambejp

2019/10/02 02:45

ファイルはファイルとして送ったほうが何かとお得ですよ
TeamPassionall

2019/10/02 03:35

ありがとうございます。 勉強になります。
guest

0

どこで引っかかっているかわかりづらいのでcanvasを画像ファイルとして送る方法

javascript

1<script> 2window.addEventListener('DOMContentLoaded', ()=>{ 3 /* canvas作成 */ 4 const canvas = document.createElement( "canvas" ) ; 5 canvas.width=200; 6 canvas.height=200; 7 const context = canvas.getContext( "2d" ) ; 8 context.beginPath () ; 9 context.arc( 100, 100, 50, 0 * Math.PI / 180, 360 * Math.PI / 180, false ) ; 10 context.fillStyle = "rgba(255,0,0,0.8)" ; 11 context.fill() ; 12 context.strokeStyle = "purple" ; 13 context.lineWidth = 8 ; 14 context.stroke() ; 15 16 /* blobに変換 */ 17 const type = 'image/png'; 18 const dataurl = canvas.toDataURL(type); 19 const bin = atob(dataurl.split(',')[1]); 20 const buffer = new Uint8Array(bin.length); 21 [].forEach.call(bin,(x,y)=>buffer[y]=bin.charCodeAt(y)); 22 const blob = new Blob([buffer.buffer], {type}); 23 24 /* fetchで送信 */ 25 const body=new FormData(); 26 body.append("myfile", blob,"test.png"); 27 const url="up.php"; 28 const method = "POST"; 29 fetch(url, {method, body}).then(data=>data.text()).then(console.log) 30 31 /* 念の為、ajaxなら上記fetchの行をこうしてください 32 const xhr = new XMLHttpRequest(); 33 xhr.open(method,url); 34 new Promise(resolve=>{ 35 xhr.addEventListener("load" ,e=>resolve(e.target.response)); 36 }).then(console.log); 37 xhr.send(body); 38 */ 39}); 40 41</script>
  • up.php

PHP

1<?PHP 2print_r($_FILES);

投稿2019/10/02 01:05

編集2019/10/02 02:32
yambejp

総合スコア116661

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問