jQueryプラグイン、jQuery.uploadを使って画像の非同期的にアップロードを行う

ページ遷移を行わずにファイルタイプのアップロードを行うには、大体２つのパターンが考えられます。
一つは、ファイルデータをbase64形式にエンコードして、Ajax通信でサーバへ送る方法。
そして、もう一つは、ページ内にiframeを生成して、そこでformによる通信からサーバへ送る方法。

今回は後者の方法を行ってくれるライブラリ、jQuery.uploadを用いて使用者が特に意識することなく画像を非同期っぽくアップロードする方法の紹介です。

jQuery.upload

サンプルコード

// $(inputSelector).upload(url, callback, type)
var url = '/action/to/upload';
var callback = function(res) {
    alert('File uploaded');
    return this;
};
var type = 'json';
$('input[type=file]').change(function() {
    $(this).upload(url, callback, type);
});

はい、とても簡単ですね。シンプルです。

IEで動かない

ありえます。僕もIE9でハマりました。
環境によっては、指定したデータ形式を返さず、IEが独自にレスポンスの文字列を解釈することがあります。

var url = '/action/to/upload';
var callback = function(res) {
    // IEのコールバックタイプが動かない場合への対処
    res = JSON.parse(res); 
    alert('File uploaded');
    return this;
};
$('input[type=file]').change(function() {
    $(this).upload(url, callback);
});

上記のように、戻り値のデータ形式を指定せずに、自分でレスポンスの文字列をパースする必要があります。