jQueryプラグインの「jQuery File Upload」を使って画像アップロード時にサムネイルを表示したいのですがやり方が分りません。

デモのページのコードを、そぎ落としてみました。

<input id="fileupload" type="file" name="files[]" multiple>
<div id="files" class="files"></div>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//blueimp.github.io/jQuery-File-Upload/js/vendor/jquery.ui.widget.js"></script>
<script src="//blueimp.github.io/jQuery-File-Upload/js/jquery.iframe-transport.js"></script>
<script src="//blueimp.github.io/jQuery-File-Upload/js/jquery.fileupload.js"></script>
<script src="//blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
<script src="//blueimp.github.io/jQuery-File-Upload/js/jquery.fileupload-process.js"></script>
<script src="//blueimp.github.io/jQuery-File-Upload/js/jquery.fileupload-image.js"></script>


<script>
$(function() {
    var url = "...";        // ※ファイルをアップロードする URL
    $('#fileupload').fileupload({
        url: url,
        dataType: 'json',
        autoUpload: true,       // ※ファイルを選択したら、即、アップロード
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
        maxFileSize: 5000000, // 5 MB
        // Enable image resizing, except for Android and Opera,
        // which actually support image resizing, but fail to
        // send Blob objects via XHR requests:
        disableImageResize: /Android(?!.*Chrome)|Opera/
            .test(window.navigator.userAgent),
        previewMaxWidth: 100,
        previewMaxHeight: 100,
        previewCrop: true
    }).on('fileuploadadd', function (e, data) {
        data.context = $('<div/>').appendTo('#files');
        $.each(data.files, function (index, file) {
            var node = $('<p/>')
                    .append($('<span/>').text(file.name));
            node.data(data)
            node.appendTo(data.context);
        });
    }).on('fileuploadprocessalways', function (e, data) {
        var index = data.index,
            file = data.files[index],
            node = $(data.context.children()[index]);
        if (file.preview) {
            node
                .prepend('<br>')
                .prepend(file.preview);
        }
    });
});
</script>

ファイルを指定したら、すぐにアップロードするように autoUpload のオプションを true にしています。

jQuery-File-Upload の外部スクリプトは、デモのページに向いていますが、ご自分のサーバに導入するときには、そちらの方を指すようにしてください。

https://blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js は、jQuery-File-Upload には含まれていないと思いますが、これを読み込まないと、デモページの処理が動きません。



因みに、似たような質問が、stackoverflow にもありました。
http://stackoverflow.com/questions/21128634/jquery-file-upload-preview-image

回答のひとつは、デモのページと同じように fileuploadprocessalways のイベントを捕まえる方法。
もうひとつは、add のイベントを捕まえて、そこでアップロードまでしています。
評価は、add のイベントを捕まえる方が高いですが、autoUpload のオプションでアップロードする方が、プラグインの流儀に敵っているような気がします。