ajaxを使った画面遷移なし、画像ありの掲示板（Twitterの簡易版のようなものです）

プログラミング初心者です。
PHPの入門書を購入後、掲示板作成（PHPとMySQLを使ったもの）まで終わりました。

その後、レベルアップのために掲示板のクオリティを上げている最中で
入門書などを参考に色々と機能を追加したのですが、画像の取り扱いで困っています。

【できていること】
・ajaxを使って、画面遷移なしでデータベースにテキストを反映
・データベースにあるテキストをHTMLに反映

【できていないこと、やりたいこと】
・HTMLファイルから画像をデータベースにアップ（画面遷移なし）
・その画像をテキストと一緒に出力

http://qiita.com/yugokitajima/items/b2fb29f5bc9af8a6bf8e
↑こちらのサイトを参考に作成しています。

【sample.html】画像を添付し、コメントを入力するHTMLです。ajaxもここにあります。

<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <form enctype="multipart/form-data"> 画像<input type="file" name="gazou"><br /> コメント<input type="text" name="contents" value="" placeholder="入力必須"><br /> <input type="button" id="send-comment" value="送信"><span style="color: red;" id="send-comment-error"></span> </form>  </div> <ul id="content"></ul> </body> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> // コメント一覧受信・表示 $(document).ready(function(){ // 送信ボタンを押したら sendComment() を実行 $('input#send-comment').click(function(){ sendComment(); }); // 既存のコメントを読み込んで表示 getComment(); }); function sendComment() { // 未入力チェック if (!$('input[name=contents]').val()) { $('#send-comment-error').text('名前を入力して下さい。'); return false; }

$.post(
    'post.php',
    {
		'gazou': $('input[name=gazou]').val(),
        'contents': $('input[name=contents]').val(),
    },
    function(data){
        // 書き込みが完了したら再度コメント一覧を読み込む
		location.reload(getComment());
    }
);

}
function getComment() {
$.ajax({
type: "GET",
url: "comment_get.php",
dataType: "json",
/**
* Ajax通信が成功した場合に呼び出されるメソッド
*/
success: function(data, dataType)
{
//結果が0件の場合
if(data == null) alert('データが0件でした');

            //返ってきたデータの表示
            var $content = $('#content');
            for (var i =0; i<data.length; i++) 
            {
                $content.append("<li>" + data[i].name + "</li>");
            }
        },
    });
}

</script> </html>

【post.php】画像とコメントを受け取って、データベースに反映するファイルです。

<?php //画像をテーブルへ try{ $gazou=$_FILES['gazou']; if($gazou['size']>0){ if($gazou['size']>1000000){ echo '画像サイズが大きすぎます。'; }else{ move_uploaded_file($gazou['tmp_name'],'./images/'.$gazou['name']); $dsn = 'mysql:dbname=********;host=localhost'; $user ='root'; $password ='********'; $dbh = new PDO($dsn,$user,$password); $dbh->query('SET NAMES utf8'); $sql='INSERT INTO ********(image) VALUES(?)'; $stmt=$dbh->prepare($sql); $gazou[]=$gazou['name']; $stmt->execute($data); } } $dbh=null; }catch(Exception $e){ print 'ただいま障害により大変ご迷惑をお掛けしております。'; exit(); } ?> <?php //コメントをテーブルへ try{ $contents=$_POST['contents']; $contents=htmlspecialchars($contents); $dsn = 'mysql:dbname=********;host=localhost'; $user ='root'; $password ='********'; $dbh = new PDO($dsn,$user,$password); $dbh->query('SET NAMES utf8'); $sql='INSERT INTO ********(contents) VALUES(?)'; $stmt=$dbh->prepare($sql); $data[]=$contents; $stmt->execute($data); $dbh=null; }catch(Exception $e){ print 'ただいま障害により大変ご迷惑をお掛けしております。'; exit(); } ?>

【comment_get.php】コメントを取得して、jsonで返しています。

<?php try{ $users = null; $dsn = 'mysql:dbname=********;host=localhost'; $user ='root'; $password ='********'; $dbh = new PDO($dsn,$user,$password); $dbh->query('SET NAMES utf8'); $sql= 'SELECT * FROM ******** WHERE 1 ORDER BY time DESC'; $stmt=$dbh->prepare($sql); $stmt->execute(); $dbh=null; while ($rec = $stmt->fetchObject() ){ if($rec==false){ break; } $users[] = array( 'id'=> $rec->id, 'name' => $rec->contents ); } header('Content-Type: application/json'); echo json_encode($users); // JSON出力 }catch(Exception $e){ print 'ただいま障害により大変ご迷惑をお掛けしております。'; exit(); } ?>

以上です。
お力添えをお願いいたします。

行動規範の内容に同意します

回答2件

ベストアンサー

普通にajaxで送っても、ファイルは送信されません。
なぜなら、

javascript
1        { 
2            'gazou': $('input[name=gazou]').val(), 
3            'contents': $('input[name=contents]').val(), 
4        }

の部分、$('input[name=gazou]').val()の戻り値が何か考えてみましょう。

答えはファイル名です。
というよりファイル名かどうかはどうでもいいのですが、JQuery.val() メソッドの戻り値は string 型の値です。
つまり文字列を送信しているのです。

ではどうするか。こちらをご覧ください。
http://blog.asial.co.jp/1260

私も試したことがないのですが、(Android 捨てるのはちょっと)
dataに対して、独自定義のオブジェクトではなく FormData クラスのインスタンスを渡すということです。

これで非同期でファイル送信可能ですが、実は古くからあるある古典的な方法を使用すると、古い実装でも問題なく動く (場合が多い、という程度かもしれませんが・・・) 方法があります。

その方法は、ajax リクエストすら使用しません。
form をそのまま submit します。
ただしそれでは画面遷移が行われてしまいます。
しかし画面遷移には回避策があります。

こちらをご覧ください。
http://blog.yuhiisk.com/archive/2014/12/16/seamless-file-upload.html

要は、遷移しているけど、メインフレームじゃない見えないところでやっているから遷移していないように見えるということです。

リンク先で少し言及していますが、コールバックの方法を補足します。
この場合レスポンスはJSONではなくHTMLになります。
ただのフレームなので。
でもHTMLということはscriptタグも使えます。Same-Origin Policy的に問題なければ、親子フレーム間で関数を呼び合うことは可能なのでコールバックできます。

html
1<script id="res" data-result='{"abc": "ここにレスポンスJSON"}'>
2    var responseObject = JSON.parse(document.getElementById("res").dataset.result);
3    frameElement.callback(responseObject);
4</script>

こんなHTMLが返れば、frameElement.callback が実行されます。
本来 data-result は html としておよび json としてエスケープしてくださいね。

frameElement.callback は自分で定義します。
親フレーム側で、submit 時にはセットされているように。form のsubmitイベントで送信の前処理ができます。

javascript
1var frame = $("iframe").get(0);
2frame.callback = function(responseObject){
3  responseObject.abc;// →"ここにレスポンスJSON"
4  delete frame.callback; // 何かの間違いで2度実行されないようコールバックは消す
5}

親フレームから見た、子フレーム(つまりiframe要素$("iframe").get(0)またはdocument.getElementById("iframeのID"))と、
子フレームから見た、グローバル変数frameElementは同一のオブジェクトで、メンバーを共有しています。

もうひとつ、ただのフレームなので、通信失敗時の処理が苦手です。
HTML なのでどんなにおかしなレスポンスが返されようとエラーは発生しません。
ただ、コールバックを呼んでくれないだけです。
リンク先でタイムアウトを設定といっているのはそういうことです。
submit したときから callback 関数が一定時間呼ばれなかったらもう失敗したものとして扱っていいとおもいます。

投稿2015/07/25 16:55

編集2015/07/25 16:58