jQuery-file-uploadでドラッグ・アンド・ドロップの範囲制限

jQuery-file-uploadとは

jQuery-file-uploadとは、webアプリケーションにおいてよく必要となる画像のアップロードを簡単に実装できるプラグインです。
公式サイト

ドラッグ・アンド・ドロップの範囲制限

さて本題です
jQuery-file-uploadでは、ドラッグ・アンド・ドロップのイベントをハンドルする対象がデフォルトでは、$(document)となっています。
このため、一つのページで複数の画像をアップロードできるようにした場合、ドラッグ・アンド・ドロップすると全て同じ画像がアップロードされてしまいます。
これを防ぐためには、ドラッグ・アンド・ドロップのイベントをハンドルする対象を変更する必要があります。
変更は簡単に出来ます。
以下のソースコードは公式サイトのドキュメントから持ってきました。

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
});

このままでは、ハンドル対象がデフォルトのままです。
ここにdropZoneオプションを追加することで、対象を変更することが出来ます。

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        dropZone: $(".target"),
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
});

この例では、ドラッグ・アンド・ドロップをtargetというクラスを持つオブジェクトに制限しています。
dropZoneオプションでは、対象のオブジェクトをcssセレクタで指定できるので、id指定がしたいときは$("#target")とします。