文件上傳的進度條


從用戶的角度來說,非常希望能夠看到傳輸的進度,所以在我們認為非常有必要加上文件上傳的進度條。

關於文件上傳進度的api,在原生js中有可以使用XMLHttpRequest的progress事件:

xhr.upload.onprogress = function (event) {
  if (event.lengthComputable) {
    var percent = Math.floor(event.loaded / event.total * 100) ;
    // 設置進度顯示
    $("#J_upload_progress").progress('set progress', percent);
  }
};

這樣就可以獲取到上傳文件的進度了。

同時,如果使用jquery的話,可以使用xhr屬性來實現:

$.ajax({
            url:API.uploadFile,
            type:'POST',
            data:formData,
            dataType:"JSON",
            contentType:false,
            processData:false,//為了保證formData能傳過去 ,不加會報錯
            success:function(data,state){
                success(data,state)},
            error:function(data,state){
                failed(data,state)},
            xhr:function () {
                this_xhr = $.ajaxSettings.xhr();
                if(this_xhr.upload){
                    this_xhr.upload.addEventListener('progress',function(e){
                        if (e.lengthComputable) {
                            var percent = Math.floor(e.loaded/e.total*100);
                            if(percent <= 100) {
                              console.log('set progress', percent);
                             
                            }
                            if(percent >= 100) {
                              console.log('文件上傳完畢,請等待...');
                             
                            }
                          }
                    },false)
                }
              }
        })

這樣就可以監聽upload方法的process來控制文件上傳的進度條顯示啦。

附上一個進度條的小組件:

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com