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(); }); |