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

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

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

HTTP(Hypertext Transfer Protocol)とはweb上でHTML等のコンテンツを交換するために使われるアプリケーション層の通信プロトコルです。

PHP

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

Ajax

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

Q&A

2回答

2327閲覧

Ajax通信でデータを送れません。

seri

総合スコア422

HTTP

HTTP(Hypertext Transfer Protocol)とはweb上でHTML等のコンテンツを交換するために使われるアプリケーション層の通信プロトコルです。

PHP

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

Ajax

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

0グッド

1クリップ

投稿2017/05/01 04:28

編集2022/01/12 10:55

情報を探しています

var forml=document.forms.formlist; formdata = new FormData(); formdata.append('_title',forml[0]); var img;//blobObj formdata.append('_img',img); $.ajax({ url: "http://../app.php", type: "POST", data: formdata, processData: false, contentType: false, success: function(data){ console.log(data); } });

PHP

if(isset($_FILES['_title'])){ echo "Load"; $title=htmlspecialchars($_REQUEST['bean_title'],ENT_QUOTES); $img=file_get_contents($_FILES['_img']); echo $title;

これではエコーであるLoadもtitleも呼ばれません。

回答よろしくお願いいたします

追記
Blobはアプリ開発ソフトのMonacaから作ってます

navigator.camera.getPicture(onSuccess, onFail, { quality: 50,destinationType: Camera.DestinationType.FILE_URI,encodingType:Camera.EncodingType.PNG, sourceType: navigator.camera.PictureSourceType.SAVEDPHOTOALBUM}); } function onFail() { console.log("写真を取得できませんでした"); } function onSuccess (imgUri) { return new Promise(function(resolve, reject) { window.resolveLocalFileSystemURL(imgUri, function success(fileEntry) { console.log("get file: " + fileEntry.fullPath); fileEntry.file(function(file){ var reader = new FileReader(); reader.onloadend = function(evt) { var blob = new Blob([evt.target.result], {type: "image/png"}); console.log("blob size:" + blob.size); formdata.append('_img',blob); ////これが添付するファイルです。 }; reader.readAsArrayBuffer(file); }, function() {console.log(error);}); }, function() {console.log(error);}); });

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

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

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

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

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

yambejp

2017/05/01 05:00 編集

HTMLのソースもつけてくださ Blobデータはどうやってつくっているのでしょうか?
guest

回答2

0

仮にsend.htmからrecv.phpに送るとします

  • send.htm

javascript

1<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 2<script> 3$(function(){ 4 $('[type=button][value=ajax]').on('click',function(){ 5 var fd = new FormData($('#f1').get(0)); 6 $.ajax({ 7 url:"recv.php", 8 data:fd, 9 type:"post", 10 processData: false, 11 contentType: false, 12 success:function(data){ 13 console.log(data); 14 }, 15 }); 16 }); 17}); 18</script> 19<form id="f1" enctype="multipart/form-data" method="post" action="recv.php"> 20<input type="text" name="a" value="xxx"><br> 21<input type="file" name="b"><br> 22<input type="submit" value="go"><br> 23<input type="button" value="ajax"><br> 24</form> 25
  • recv.php
<?PHP if(isset($_FILES["b"])){ print_r($_POST); print_r($_FILES); } ?>

insert処理

こうしてみてください

PHP

1 $sql="insert into imgdata(title,img)values(:t,:i)"; 2 $stmt = $pdo->prepare($sql); 3 $stmt->bindValue(':t',$title,PDO::PARAM_STR); 4 $fp = fopen($_FILES['_img']['tmp_name'], 'rb'); 5 $stmt->bindValue(":i", $fp, PDO::PARAM_LOB); 6 $stmt->execute(); 7

imgタグのsrcからデータを抜くsample

javascript

1<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 2<script> 3$(function(){ 4 var fname=$('#testImg').attr('src').match(/([^\/]+?)$/)[1]; 5 var imgdata; 6 var xhr = new XMLHttpRequest(); 7 xhr.open('GET', $('#img1').attr('src'), true); 8 xhr.responseType = 'arraybuffer'; 9 xhr.onload = function(e) { 10 imgdata=this.response; 11 }; 12 xhr.send(); 13 $('[type=button][value=ajax]').on('click',function(){ 14 var fd = new FormData($('#f1').get(0)); 15 fd.append("_img",new Blob([imgdata],{"type":"image/jpeg"}),fname); 16 /*ごめんなさい、typeの自動取得が調べられてません*/ 17 $.ajax({ 18 url:"recv.php", 19 data:fd, 20 type:"post", 21 processData: false, 22 contentType: false, 23 success:function(data){ 24 console.log(data); 25 }, 26 }); 27 }); 28}); 29</script> 30<form id="f1" enctype="multipart/form-data" method="post" action="y.php"> 31<input type="text" name="title" value="xxx"><br> 32<input type="submit" value="go"><br> 33<input type="button" value="ajax"><br> 34</form> 35<img src="http://example.com/hoge/fuga.jpg" id="testImg">

投稿2017/05/01 05:14

編集2017/05/02 00:25
yambejp

総合スコア114505

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

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

seri

2017/05/01 07:18

回答ありがとうございます 上記で受けとった_FILESをPHP側でMysqlに登録した際 mysql内でselect * fromで見てみた所、表記が空文字となっていまして、これは無事に受け取れたとみていいのでしょうか? 仮になにも無い状態で登録した場合はNULLと出ます
seri

2017/05/01 07:21 編集

受け取りは以下のようにしています。 $title=$_POST['_title']; $img=file_get_contents($_FILES['_imgfile']); $sql=<<<SQL insert into imgdata(title,img)values(:t,:i); SQL; $s=$con->prepare($sql); $s->bindValue(':t',$title,PDO::PARAM_STR); $s->bindValue(':i',$img); $s->execute(); if($s){echo "Conect:";} else{echo "NoConect";}
yambejp

2017/05/01 07:36

$_FILESで受け取ったデータの実体はテンポラリにあるファイルなので $img=file_get_contents($_FILES['_imgfile']['tmp_name']); じゃないですか?
yambejp

2017/05/01 07:38

個人的にはDBにバイナリ入れても仕方ないと思うので、ファイルパスを保存しておき ファイル自体は適当のディレクトリに保持しますけどね
seri

2017/05/01 09:00

$img=file_get_contents($_FILES['_imgfile']['tmp_name']);とましたがmysql内では空文字として表示されてしまいます。
yambejp

2017/05/01 09:34

insertの仕方を追記しておきました
seri

2017/05/01 10:39

ありがとうございます、Mysql内でそれらしきものが確認できました。 たびたびもうしわけないのですが このオブジェクトを受け取り画像として出力できるか試したのですがエラーとなります、送信する前のBlobでは実行できたのですが何が間違っているかご教授願います! var reader = new FileReader(); reader.onloadend = function() { var img = document.getElementById("imgTest"); img.src = reader.result; }; reader.readAsDataURL((this.response));
yambejp

2017/05/01 11:07

どういうことでしょう? imgタグのsrcの中身を取り出したいのですか?
seri

2017/05/01 19:39 編集

はい。型が違うのか、ImgのSrcに付属し出力しても画像が表示されません・・
yambejp

2017/05/02 00:13

ちょっと状況がわかりませんがimg srcのデータを抜くなら、サーバーにファイルパスをおくって phpでfile_get_contentsやcurlなどで直接読めばよいような気がしますが・・・ とはいえ、imgをFormDataにappendするsampleつけておきます ajaxで読むのが楽そうですが$.ajaxは余計な処理がはいるようなので xhrで処理します
seri

2017/05/02 02:55

説明の仕方が変でしたね SRCの中の画像をサーバーに送るのではなく、サーバーに保存した画像BlobデータをJavaScriptで受け取って画像として出力する方法が解らないのです。
yambejp

2017/05/02 03:06

javacriptで直接SQLサーバーのデータは抜き出せませんのでなんらかのapi的な処理を挟むんですよね? phpがインタフェースするなら「loadimage.php?id=123」的なローダを用意して <img src="loadimage.php?id=123">のような読み込みをすればよいでしょう ただしmimeの問題があるので、SQL側でcontent-typeを保存しておき、 要求に応じてheaderを発行してください header('Content-Type: image/jpeg'); HTMLに画像を埋め込みたいならphp側でbase64エンコードして print '<img src="data:images/jpeg;base64,'.base64_encode($img).'" />' のようにすればよいでしょう。
seri

2017/05/02 03:06

PHPに出力する前のファイルは var reader = new FileReader(); reader.onloadend = function() { var img = document.getElementById("imgTest"); img.src = reader.result; }; reader.readAsDataURL(blob); で読み込みが可能でしたが、サーバーのMysqlに保存したBlobをPostで受け取って reader.readAsDataURL(this.responce); としてみたのですが、表示されません
seri

2017/05/02 03:10

投稿タイミングがかぶってしまいました、なるほどbase64ですね! 実装してみます。 ありがとうございます、何時間も調べて解らなかったので助かります・・それだけでなく、丁寧にmimeまで説明していただき感謝します。 ありがとうございました。
guest

0

chrome 等の開発ツールで、実際の post 状況と、response を確認するとイイですよ。

投稿2017/05/01 04:32

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問