JQUERYによる画像投稿処理の成功/エラー処理が飛ばない件

色々なサイトに JQuery による画像のPOSTのサンプルはあるんですが、どれを実行しても、正常にエラー処理、成功処理に飛んでくれないので。まとめてみました

var data = {};
var imgdata = canvas1.toDataURL();
//canvas1の内容を変換
imgdata = imgdata.replace(/^data:image\/png;base64,/, '');
data.url = imgdata;
data.fname= document.getElementsByName("FSAVE")[0].value;
//ファイル名を渡す
$.ajax({
        url: 'savedr.php',
//バックグラウンドで呼び出す先のURL
        type: 'POST',
        data: data,
        success: function(data){
           document.getElementsByName("GSAVE")[0].value="保存成功";
// 成功時
//          alert(data.length);
//          for(var i=0; i<data.length; i++){
//             alert(data[i].fname);
//           }
        },
        error: function(msg){
           document.getElementsByName("GSAVE")[0].value="保存失敗";
// 失敗時
        },
        dataType: 'json'
 });

投稿処理をする JavaScript

<?php
  header('Content-Type: application/json'); 

  $fileURL=$_POST['url'];
  $fileN=$_POST['fname'];
  if(!is_dir('draw')){
//画像保存フォルダがなければ作る
    mkdir('draw');
  }
//ファイル名指定
  $fp = fopen('draw/'.$fileN.'.png','w');
  if( $fp) {
    fwrite($fp,base64_decode($fileURL));
    fclose($fp);
    $jss[] = array( 'fname'=> $fileN.".png" );
    echo json_encode( $jss );
//ファイルが保存できた場合、 jsonでコードを返す
  }
  else{
    echo "失敗";
  }
?>

呼び出してる savedr.php の内容

一応、これで書き込み失敗と成功が振り分けられるのが確認できた
なんか呼び出し先の処理ちゃんと書いてないサイトが多かったり、jsonp 呼んでたり json 呼んでたりするのに 処理が一緒だったり ってのが多かった ･ω･；

9/4追記
JQuery 1.4から追加された $.parseJSON は JQuery 1.6以降はつけなくても変換してくれるらしい ･ω･

おすすめ

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です