jquery 업로드시 프로그래스바 적용하기.

jquery.form.min.js   파일을 다운받고 다음과같이 추가해줘야 합니다.

다운로드 ==> http://malsup.com/jquery/form/

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

<script src="/js/vender/form/jquery.form.min.js"></script>

// 공통 - 파일업로드시 프로그래스 바 

/*

* 이미지파일을 등록하면, 자동으로 submit을 해서 임시폴더로 이동한다.

*/

$(document).on('change','#file',function(){

$("#fileName").val("");

    $("#fileSize").val("");

           $("#filePath").val("");

    $("#fileOrgName").val("");

var fileYn = $(this).val();

if(fileYn != ""){

$("#content_upload").submit();

}else{

return;

}

});

// submit 을 받아서 ajaform 을 이용해 파일을 임시테이블로 전송한다

    $(document).on('submit','#content_upload',function(){

bar = $('.progress-bar');

percent = $('.progress-bar');

    }).ajaxForm({

beforeSend: function() {

            var percentVal = '0%';

            bar.width(percentVal);

            percent.html(percentVal);

        },

        uploadProgress: function(event, position, total, percentComplete) {

            var percentVal = percentComplete + '%';

            bar.width(percentVal);

            percent.html(percentVal);

        },

        complete: function(xhr) {

        var rtnData = JSON.parse(xhr.responseText);

        $("#fileName").val(rtnData.fileName);

        $("#fileSize").val(rtnData.fileSize);

        $("#filePath").val(rtnData.filePath);

        $("#fileOrgName").val(rtnData.fileOrgName);

        }

    });

    /*

* 이미지 등록 완료.

*/

html 코드는

<input type="file" id="fileName" accept="image/*"   />

// 프로그래스 바는 

<div class="progress">

<div class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" ></div>