Zeige Prozent der Upload von api Winkel

Question

So einige Daten mit einem $ http.post in Ich schicke Winkel wie

$http.post('/api/FileBrowser/UploadedFiles/', 
           JSON.stringify(dummyobj), 
           { 
            headers: { 
             'Content-Type': 'application/json' 
            } 
           } 
         ).success(function (data2) { 

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

          }); 

So, jetzt will ich versuchen und zeigen, wie viele Prozent der Upload erfolgt, Ich kenne die Größe des Uploads nach dem Anruf. also würde ich gerne etwas wie eine Callback-Methode finden, die zurückgibt, wie viele Bytes senden.

Dies sollte machbar sein, da ein Browser dies anzeigen kann. Wie kann man das machen? Dank

Answer 1

Verwendung ng-Datei-Upload

ich es vor der Produktion für große Unternehmen verwendet haben - hervorragend - sehr gut, wenn sie in conjuntion mit ui.bootstrap verwendet Fortschrittsbalken

https://github.com/danialfarid/ng-file-upload

https://angular-ui.github.io/bootstrap/#/progressbar

beide sind auch Bibliotheken respektieren innerhalb der Angular Gemeinschaft

Code von der ng-Datei-Upload-Site

//inject directives and services. 
var app = angular.module('fileUpload', ['ngFileUpload']); 

app.controller('MyCtrl', ['$scope', 'Upload', function ($scope, Upload) { 
// upload later on form submit or something similar 
$scope.submit = function() { 
    if ($scope.form.file.$valid && $scope.file) { 
    $scope.upload($scope.file); 
    } 
}; 

// upload on file select or drop 
$scope.upload = function (file) { 
    Upload.upload({ 
     url: 'upload/url', 
     data: {file: file, 'username': $scope.username} 
    }).then(function (resp) { 
     console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data); 
    }, function (resp) { 
     console.log('Error status: ' + resp.status); 
    }, function (evt) { 
     var progressPercentage = parseInt(100.0 * evt.loaded/evt.total); 
     console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name); 
    }); 
}; 
// for multiple files: 
$scope.uploadFiles = function (files) { 
    if (files && files.length) { 
    for (var i = 0; i < files.length; i++) { 
     Upload.upload({..., data: {file: files[i]}, ...})...; 
    } 
    // or send them all together for HTML5 browsers: 
    Upload.upload({..., data: {file: files}, ...})...; 
    } 
} 
}]);