Angularjs $ http und Fortschrittsbalken

Muss ich Datei hochladen und ich benutze $http (dieser code ist von meinem .service () - Funktion):

sendFile: function (params) {
            return $http({method : 'post',
                url : 'http://XXXXXXXXXXXXX/rest/file.json',
                headers : { 'X-CSRF-Token' : $cookies['csrftoken']},
                data : params
            })
        },

Nun, für wenig-Datei und eine gute Linie, es ist kein problem, aber mit einer großen Datei und/oder eine schlechte/langsame Linie, es ist ein problem der Benutzeroberfläche: der Nutzer kann nicht wissen, wenn der upload zu Ende. Ich brauche einen Fortschrittsbalken.

So, ich habe die Suche im internet, aber ich habe keine Lösung gefunden. Gibt es eine Möglichkeit zu bekommen, einige Fortschritte/Benachrichtigung von $http ?

Habe ich versucht diesen code ohne Glück:

ProfileService.sendFile(data)
                    .then(function(ret) {
                            var uri = ret.data.uri;
                            scope.content = "Upload finished";

                            scope.postForm.fid = ret.data.fid;
                            scope.postForm.buttonDisabled = false;
                        },
                        function(error) {
                            scope.postForm.showError = true;
                            scope.postForm.errorMsg = error.data;
                        },
                        function(progress) {
                            console.log("inside progress");
                            console.log(progress)
                        }
                    );

"progress" - Funktion wird nie aufgerufen.

Ich bin mit angular 1.2.x

Dank.

InformationsquelleAutor der Frage ZioBudda | 2014-04-21

  1. 49

    Können Sie Winkel-Laden-Bar. Es arbeitet automatisch für $http Anforderungen und benötigt keine Installation außer hinzufügen als app-Abhängigkeit.

    angular.module('app', ['angular-loading-bar']); //that's all

    InformationsquelleAutor der Antwort Muhammad Reda

  2. 6

    Ich würde empfehlen, ng-Fortschritt. Diese verarbeitet mehrere Anfragen und im Grunde zeigt eine nette kleine progress-bar für alle http-Aktivität.

    http://victorbjelkholm.github.io/ngProgress/

    InformationsquelleAutor der Antwort mithun_daa

  3. 3

    Können Sie dies lösen, indem Sie versteckt/zeigt ein loadingbar. Starten Sie die Anzeige der loadingbar sobald der upload beginnt, und entfernen Sie die loadingbar wenn der upload fertig ist (in der Erfolgs-handler aus der $http-request).

    Habe ich eine einfache jsfiddle für Sie, um Ihnen an einem Beispiel zeigen.

    Ich bin mit $timeout zu simulieren $http Anfrage.

    Html-markup:

    <div ng-controller="MyCtrl">
    <!-- this can be an image if you want -->
    <p ng-show="loading">...LOADING...</p>

    <!-- Showing the status -->
    <p ng-hide="loading">{{status}}</p>
    <button type="button" ng-click="upload()">Do $http request</button>
</div>

    Js-Controller:

    function MyCtrl($scope, $timeout) {
    $scope.status = 'Not started';
    $scope.loading = false;

    $scope.upload = function() {
        $scope.loading = true;
        //Simulating a http request with a timeout
        $timeout(function(){ 
            $scope.status = "Finished";
            $scope.loading = false;
        },3000);
    }
}

    Für eine demonstration, wie das funktioniert, sehen Sie diese Geige.

    Update

    Durch Aufklärung in den Kommentaren, Sie wollen in der Lage sein, die Fortschritte der upload-Prozentsatz. zB. Wie viele % bis der upload fertig ist

    Sollten Sie sich das SO ein postwo dies schon besprochen wurde.

    Aus der akzeptierten Antwort:

    Ich glaube nicht, dass $http.post() verwendet werden kann.
    Wie für die client-Seite sollte es mit einem HTML5-fähigen browser, aber Sie werden wahrscheinlich haben, um Ihre eigenen erstellen XMLHttpRequest-Objekt und onprogress Zuhörer. Sehen AngularJS: tracking-status von jeder Datei, die hochgeladen wird gleichzeitig für Ideen.

    InformationsquelleAutor der Antwort aludvigsen

  4. 2

    Können Sie einfach die Event-Handler der $http-service

    wie:

    mainModule.service('File', function (Api) {

    var controller = 'files';

    function File(data) {
        this.$data = data;
    }

    File.__proto__ = File.prototype = {
        upload: function (progress) {
            var fd = new FormData();
            fd.append('file', this.$data);
            return pack('/upload').post(fd, {
                transformRequest: angular.identity,
                uploadEventHandlers: {'progress': progress},
                headers: {'Content-Type': undefined}
            });
        }
    };

    return File;
    function pack(action) {
        return Api(controller + action);
    }
});

    Api ist ein service, um eine Verbindung mit der server-api.

    $data ist das file-Objekt aus dem input

    InformationsquelleAutor der Antwort german meza

  5. 0

    Wenn Sie nicht schreiben wollen zeigen, verstecken sich in jeder einzelnen http-Methode, dann können wir ein einfaches erstellen der Richtlinie mithilfe $http.pendingRequests.length und-und das ist es.

    Wann immer wir haben jede http-Anfrage in Bearbeitung, es wird zeigen, automatisch.

    app.directive('loading', ['$http', function ($http) {
    return {
        restrict: 'A',
        link: function (scope, elm, attrs) {
            scope.isLoading = function () {
                return $http.pendingRequests.length > 0;
            };
            scope.$watch(scope.isLoading, function (v) {
                if (v) {
                    elm.show();
                } else {
                    elm.hide();
                }
            });
        }
    };
}]);

    - UND HTML -

     <div data-loading>
   Please wait...
 </div>

    Für mehr Details siehe das

    InformationsquelleAutor der Antwort Ali Adravi

Schreibe einen Kommentar