Question

当我上传文件以指示用户该文件仍在上传时，是否有人可以帮助我如何设置进度条？对不起，对于这个我还是新手。我对此有很多看法，但仍让我对此感到困惑。提前谢谢！

这是我的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) {
                        });
                // }
            };

Answer 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);

解决此问题的另一个选择是处理服务器端，以防您对服务进行控制。

Answer 2

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

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

使用Angular JS中的进度条上传文件

2 个答案: