Posted at
vte.cxDay 10

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

More than 3 years have passed since last update.

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

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を使用し、複数の画像を一度に登録する方法などが記載されています。

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