Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

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

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

takeyama
AngularJS始めたばかりの初心者です
http://reflexworks.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away