HTML5 FileReader的onprogress事件中，為什么進(jìn)度條寬度只更新一次？

我想使用HTML5中的FileReader的API，制作一個(gè)人物頭像圖片上傳并預(yù)覽的功能，在上傳的過程中希望依靠FileReader的onprogress事件不斷更新進(jìn)度條的寬度來達(dá)到顯示進(jìn)度的狀態(tài)，進(jìn)度條用的是bootstrap中的進(jìn)度條樣式?？僧?dāng)我運(yùn)行時(shí)候，發(fā)現(xiàn)進(jìn)度條的寬度只更新一次。我剛開始以為是onprogress事件只運(yùn)行了一次，于是我在onprogress事件中添加了alert，發(fā)現(xiàn)有多個(gè)窗口彈出，說明onprogress事件運(yùn)行正常。除此之外，我還發(fā)現(xiàn)，進(jìn)度條的寬度更新值恰與第一次彈出窗口的值對(duì)應(yīng)，為什么進(jìn)度條寬度之后不再更新了呢？
html

                    <div class="col-md-6 col-sm-6 col-xs-6">
                        <img id="person_pic"  src='{{user.pic.url}}' alt="" />
                        <div id="file" class="form-group">
                            <label for="{{form.pic.id_for_label}}">更改頭像：</label>
                            {{form.pic}}
                            {{form.pic.error}}
                        </div>
                        <div id="progress" class="progress progress-striped active" hidden="hidden">
                            <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                            </div>
                        </div>
                    </div>

js

$("input[type=file]").change(function(){    //上傳頭像圖片預(yù)覽
    var fileobj = $(this)[0];
    if (fileobj && fileobj.files[0]){
        var headimage = fileobj.files[0]
        if (headimage.type.split('/')[0] == 'image'){
            if(headimage.size/1024/1024 <= 2 ){
                    if (typeof FileReader != 'undefined'){
                        var reader = new FileReader();
                        reader.onloadstart = function(){
                            $('#progress').show();
                        };
                        reader.onprogress = function(e){  //此處為進(jìn)度條更新代碼
                            alert(e.loaded/e.total*100+"%");
                            $("div[role=progressbar]").width(e.loaded/e.total*100+"%");
                        };
                        reader.readAsDataURL(headimage);
                        reader.onload = function(){
                            var dataURL = reader.result;
                            $("#person_pic").attr("src",dataURL);
                        };
                    }else{
                        var URL = window.URL || window.webkitURL;
                        var imageURL = URL.createObjectURL(headimage);
                        $("#person_pic").attr("src",imageURL);
                    } 
            }else{
                alert("圖片大小必須小于2M")
                fileobj.value = '';
            }
        }else{
            alert("上傳文件必須為圖片格式");
            fileobj.value = '';
        }
    }
});

如圖進(jìn)度條停在一個(gè)地方就不動(dòng)了，然而圖片已經(jīng)讀取完畢。