文件上传的进度条

从用户的角度来说，非常希望能够看到传输的进度，所以在我们认为非常有必要加上文件上传的进度条。

关于文件上传进度的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>