[JQuery] ajax 파일업로드시 progress bar 만들기

 

jQuery form plugin을 사용해서 파일업로드할 때 프로그래스바를 만들어보자.

 

1. script를 cdn방식으로 import한다.

<script src="http://malsup.github.com/jquery.form.js"></script> 

 

2. html tag 내 form tag를 작성해준다

<form action="원하는 경로" enctype="multipart/form-data" method="POST">
    <input name="title" value="테스트1"/>      
    <input name="contents" value="테스트 자료입니다."/>  
    <input type="file" name="file"/>     
    <input type="submit" value="upload"> 
</form>   

<div class="progress">     
    <div class="bar"></div>     
    <div class="percent">0%</div> 
</div> 

<div id="status"></div> 

 

3. 생성한 div에 style적용

<style>   
.progress {
    position:relative;
    width:400px;
    border: 1px solid #ddd;
    padding: 1px;
    border-radius: 3px; 
}   
.bar {
    background-color: #B4F5B4; 
    width:0%; 
    height:20px; 
    border-radius: 3px;
}   
.percent { 
    position:absolute; 
    display:inline-block; 
    top:3px; 
    left:48%; 
} 
</style> 

 

4. script 작성

$(function() {  
    let bar = $('.bar');     
    let percent = $('.percent');     
    let status = $('#status');     
    $('form').ajaxForm({         
        beforeSend: function() {             
            status.empty();             
            let percentVal = '0%';             
            bar.width(percentVal);             
            percent.html(percentVal);         
        },         
        uploadProgress: function(event, position, total, percentComplete) {             
            let percentVal = percentComplete + '%';             
            bar.width(percentVal);             
            percent.html(percentVal);         
        },         
        complete: function(xhr) {            
            alert('성공');         
        },        
        error:function(e){           
            alert('실패');        
        }              
    }); 
});  

 

 

도움이 되셨다면 하트 및 댓글 부탁드립니다♥