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

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

ただいまの
回答率

88.91%

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

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,311

seri

score 396

情報を探しています

  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);});

    });
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • yambejp

    2017/05/01 14:00 編集

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

    キャンセル

回答 2

+2

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

  • send.htm
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $('[type=button][value=ajax]').on('click',function(){
    var fd = new FormData($('#f1').get(0));
    $.ajax({
    url:"recv.php",
    data:fd,
    type:"post",
    processData: false,
    contentType: false,
    success:function(data){
      console.log(data);
    },
    });
  });
});
</script>
<form id="f1" enctype="multipart/form-data" method="post" action="recv.php">
<input type="text" name="a" value="xxx"><br>
<input type="file" name="b"><br>
<input type="submit" value="go"><br>
<input type="button" value="ajax"><br>
</form>
  • recv.php
<?PHP
if(isset($_FILES["b"])){
print_r($_POST);
print_r($_FILES);
}
?>

 insert処理

こうしてみてください

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

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  var fname=$('#testImg').attr('src').match(/([^\/]+?)$/)[1];
  var imgdata;
  var xhr = new XMLHttpRequest();
  xhr.open('GET', $('#img1').attr('src'), true);
  xhr.responseType = 'arraybuffer';
  xhr.onload = function(e) {
    imgdata=this.response;
  };
  xhr.send();    
  $('[type=button][value=ajax]').on('click',function(){
    var fd = new FormData($('#f1').get(0));
    fd.append("_img",new Blob([imgdata],{"type":"image/jpeg"}),fname);
    /*ごめんなさい、typeの自動取得が調べられてません*/ 
   $.ajax({
    url:"recv.php",
    data:fd,
    type:"post",
    processData: false,
    contentType: false,
    success:function(data){
      console.log(data);
    },
    });
  });
});
</script>
<form id="f1" enctype="multipart/form-data" method="post" action="y.php">
<input type="text" name="title" value="xxx"><br>
<input type="submit" value="go"><br>
<input type="button" value="ajax"><br>
</form>
<img src="http://example.com/hoge/fuga.jpg" id="testImg">

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/02 12: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).'" />'
    のようにすればよいでしょう。

    キャンセル

  • 2017/05/02 12: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);
    としてみたのですが、表示されません

    キャンセル

  • 2017/05/02 12:10

    投稿タイミングがかぶってしまいました、なるほどbase64ですね!
    実装してみます。

    ありがとうございます、何時間も調べて解らなかったので助かります・・それだけでなく、丁寧にmimeまで説明していただき感謝します。
    ありがとうございました。

    キャンセル

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 88.91%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る