JavaのWebアプリケーション開発フレームワークによる、Webサイト開発の顛末記です。

EclipseのMavenを使った、Spring-MVC、Thymeleaf、MyBatis 等のプログラミングテクニックを、
備忘録的に記録しています。実際に動くソースコードを多用して説明していますので、
これからEclipseや、Spring-MVCを始めたいと思っている人にとって、少しでも参考になれば幸いです。
Spring-MVCの散歩道 > 応用の森(jQuery/JavaScript 編) > dropzone.jsを使用した、Ajaxでのファイルアップロードサンプル

$(function(){
    var myUtil = function() {
        /**
         * アニメーションアラート表示
         * myalert.cssと併用して使用する事
         * target    :アラートタグID名(#div_alert)
         * movepos :表示Y位置
         * foutsec:フェードアウトする秒数
         */
        this.showAlert = function(target,message, movepos,foutsec) {
            $(target).css("margin-top", "0px");
            if(movepos==null) movepos = "40px";
            if(foutsec==null) foutsec = 3;

            $(target).text(message);

            $(target).show();           //アラートを表示
            $(target).animate({       //アニメーションでmove
                    marginTop: movepos      //Moving Y Position
            }, 300, 'swing');

            //3秒後に消滅
            setTimeout(function() {
                $(target).fadeOut('slow');
            }, foutsec*1000);       //Sleep Sec
            return false;
        }

        /**
         * AjaxでFormDataをPostする
         * 返却値:JSON or HTMLを返す
         * url : 実行するサーブレットのURL
         * req: リクエストするパラメータ(FormData)
         * appcalback : コールバック関数
         * dataType:省略可 戻り値の「形式 'json', 'html'.......指定が無ければ 'json'
         *
         * 使い方)
         * var formData = new FormData();
         * formData.append("uploadfile", file_data);
         * myutil.postFormData(url, formData, function(data, status){
		 *        :
		 *        if(!status) {:    //成功時の処理
		 *        :
		 *        } else {			//NG
		 *        	myutil.showAlert('#div_alert',"障害発生["+data+"]","150px");
		 *        }
         * }, 'html');
         */
        this.postFormData = function(url, req, appcallback, dataType) {
            if(dataType==null) dataType='json';
            //パラメータ設定
            var arg = {
                    url:url,
                    dataType: dataType,
                    type       : "post",
                    data      : req,             //FormData
                    processData: false,     //Ajaxがdataを整形しない指定
                    contentType: false      //contentTypeもfalseに指定
            };
            var opt = $.extend({}, $.ajaxSettings, arg);
            var jqXHR = $.ajax(opt);    //Ajax実行

            var defer = $.Deferred();

            //正常時
            jqXHR.done(function(data, statusText, jqXHR) {
                // defer.resovle ではなくて defer.resolveWith で
                // postFormData(...).done() 内でのthisのコンテキストを
                // 明示的に指定する
                defer.resolveWith(this, arguments);
                //状態は、success でもアプリレベルでエラーとかの場合は
                //呼び出し側で、dataの中身を調べること
                appcallback(data, false);
            });

            //エラー時
            jqXHR.fail(function(jqXHR, statusText, errorThrown) {

                // defer.reject ではなくて defer.rejectWith で
                // postFormData(...).fail() 内でのthisのコンテキストを
                // 明示的に指定する
                defer.rejectWith(this, arguments);
				appcallback(errorThrown, true);
            });

            jqXHR.always(function() {
                //console.log('always(=complete)時の共通処理 ...');
            });

            return $.extend({}, jqXHR, defer.promise());
        }

    };

    //Objectインスタンス生成
    myutil = new myUtil();
});