Angular JS中带有进度条的文件上传答案

【问题标题】：File upload with progress bar in Angular JSAngular JS中带有进度条的文件上传
【发布时间】：2014-09-01 07:27:13
【问题描述】：

有没有人可以帮助我在上传文件时如何放置进度条以指示用户文件仍在上传？对不起，我对这个还是新手。我读了很多关于此的内容，但仍然让我对此感到困惑。提前谢谢！

这是我将提交文件的html：

     <form class="form-group" ng-submit="addX()">
        <div class="col-lg-4">
            <input id="file" type="file" name="file" class="file btn btn-default"  data-show-preview="false"><br>
            <input id="submit" class="btn btn-primary" type="submit" name="submit" value="Upload" /><br/><br/>
        </div>
     </form>

这是我的 js，它将我连接到我的 python 文件：

 $scope.addX = function() {
         var f = document.getElementById('file').files[0]; console.log(f);
         var formData = new FormData();
         formData.append('file', f); console.log(formData);
           $http({method: 'POST', url: 'http://x.x.x./',
                           data: formData,
                           headers: {'Content-Type': undefined},
                           transformRequest: angular.identity})
                  .success(function(data, status, headers, config) {
                            if (data.success) {

                                console.log('import success!');

                            }
                        })
                        .error(function(data, status, headers, config) {
                        });
                // }
            };

【问题讨论】：

标签： python angularjs progress-bar

【解决方案1】：

不幸的是，目前这似乎不可能。您可以关注此线程 https://github.com/angular/angular.js/issues/1934，该线程正在调用访问进度更新所需的 xhr 请求。目前您需要自己使用 XHR2 对象。像这样的

var fd = new FormData();
fd.append("uploadedFile", file);

xhr = new XMLHttpRequest();

xhr.upload.addEventListener("progress", uploadProgress, false);

xhr.addEventListener("readystatechange", function (e) {
// upload completed
if (this.readyState === 4) {

// do whats needed
}

xhr = null;
}
});

xhr.addEventListener("error", function (e) {
 callback(e);
});
//xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST", url);

// send the form data to the server
xhr.send(fd);

解决此问题的另一种选择是在服务器端处理它，以防您确实可以控制服务。

【讨论】：

【解决方案2】：

对于那些在 $http 中搜索选项的人，以下内容会有所帮助。有一种方法可以通过监听事件'uploadEventHandlers'来获取文件上传进度

https://stackoverflow.com/a/41930083/6282758

【讨论】：