프로그래스바

//// 일반 폼 (포스트방식) 프로그래스바 (jquery.form.js 필요)
$('form').ajaxForm({
   beforeSend: function() {
    ps_box.fadeIn(200);
    ps_title.text("업로드 중...");
       //var percentVal = '0%';
       //bar.width(percentVal)
       //percent.html(percentVal);
   },
   uploadProgress: function(event, position, total, percentComplete) {
    //ps_title.text("업로드 중...");
    ps_bar.css('width',percentComplete+"%");
    ps_text.text(percentComplete+'%');
    //ps_bar.animate({width:percentComplete+"%"},100);
    //console.log(percentComplete);
       //var percentVal = percentComplete + '%';
     
       //bar.width(percentVal)
       //percent.html(percentVal);
//console.log(percentVal, position, total);
   },
   success: function() {
    ps_title.text("업로드 완료");
ps_box.fadeOut(200);      
   },
complete: function(xhr) {
location.href = "taskMain.do?task_idx=${trDTO.task_idx}";
//status.html(xhr.responseText);
}
});


//// 일반 Ajax
$.ajax({
    xhr: function () {
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener("progress", function (evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                console.log(percentComplete);
                $('.progress').css({
                    width: percentComplete * 100 + '%'
                });
                if (percentComplete === 1) {
                    $('.progress').addClass('hide');
                }
            }
        }, false);
        xhr.addEventListener("progress", function (evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                console.log(percentComplete);
                $('.progress').css({
                    width: percentComplete * 100 + '%'
                });
            }
        }, false);
        return xhr;
    },
    type: 'POST',
    url: "/echo/html",
    data: data,
    success: function (data) {}
});