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