【vte.cx入門】9.画像をアップロードし参照する：jQuery実践編

ここでは画像の登録と参照の方法について説明します。

FormDataオブジェクトをajax通信でPOSTすることで画像データを登録することができます。

1.ajaxでFormData（画像データ）を登録する（POSTリクエスト）

jQueryのajax通信を使用し、POSTリクエストを実行します。

HTML

<form id="form">
<input type="file" id="file" name="picture">
<input type="submit" id="submitBtn" value="登録する">
</form>

javascript

$('#submitBtn').on('click', function(evt) {

    var form = $('#form').get()[0];
    var formData = new FormData( form );

    $.ajax({
        url: '/d/hoge',
        method: 'post',
        dataType: 'json',
        data: formData,
        processData: false,
        contentType: false
    }).done(function( res ) {
        alert('画像登録成功');
    }).fail(function( jqXHR, textStatus, errorThrown ) {
        alert('画像登録失敗');
    });
    return false;
});

■リクエスト

param	値	例
url	登録先URL	/d/hoge
method	POST
dataType	json
data	formデータ
processData	false
contentType	false

ファイル名の禁止文字

ファイル名はキーになるため、キーで使用できない文字は指定できません。
キーに含まれる名前には英数字と$、_(アンダースコア)が使えます。

■レスポンス

成功ステータス

ステータス	メッセージ	レスポンス
200	OK	{"feed" : {"title" : "参照先URL"}}

成功したら、レスポンスに画像の参照先URLが格納されています。
そこにアクセスすることで画像に参照できます。

/d/hogeを登録先としたら、/d/hoge/{画像ファイル名}が参照先になります。

失敗ステータス

その他のエラーの場合、以下の仕様書の下部に細かく記載されています。
HTTPステータス一覧

「URI must not contain any prohibited characters」エラー（ステータスコード400）

このエラーが発生した場合は、ファイル名に禁止文字が含まれています。
ファイル名を修正し、もう一度試してみてください。

2.画像データ参照する

画像登録時にレスポンスで返却されたURLにそのままアクセス(GET)するとバイナリデータが返却されます。

http://{自分のサービス}/d/参照先URL

画像が表示できたら成功です。

終わりに

画像アップロードの詳しい仕様はこちらをご参照ください。
サーバーサイドJavascriptを使用し、複数の画像を一度に登録する方法などが記載されています。

次回は共有フォルダの作成方法を説明します。