Как показать файл загружается?

Question

У меня есть рабочий код для хранения изображения в памяти перед публикацией в API. Однако это может занять некоторое время, чтобы загрузить этот файл в память. Мне нужен способ показать, что файл загружается.

У меня есть значок spinner, который можно показать с помощью ng-show, но у меня нет ничего, что я могу установить для ng-show. Пока что я ничего не нашел, это простое решение. Есть ли HTML5 или угловой способ сделать это, не будучи слишком сложным?

HTML:

<input class="input-dnld" id="loadImg" type='file' placeholder="Select an image to upload" name="topoImg" onchange="angular.element(this).scope().readimg(this)" accept="image/*" required> 
<label for="loadImg" required><span class="glyphicon glyphicon-open glyph-style"></span>Select an image to upload</label> 

JS:

$scope.readimg = function(ele) { 
    $scope.image = ele.files[0]; 
} 

Answer 1

Вы можете использовать объект FileReader (используя свой комментарий, с незначительными изменениями):

$scope.readimg = function(ele) { 
    var r = new FileReader(); 
    r.onloadend = function (e) { 
     $scope.image = e.target.result; 
     ele.imgupload = false; 
    } 
    ele.imgupload = true; 
    r.readAsArrayBuffer(ele.files[0]); 
} 

Больше об объекте FileReader : https://developer.mozilla.org/en-US/docs/Web/API/FileReader

Answer 2

Я понял. Дело не в том, что код в readimg не запускался или флаги, которые я добавил позже, не были установлены, а скорее, что привязки не обновлялись до тех пор, пока они не вернутся.

Вот мое быстрое решение:

$scope.readimg = function(ele) { 
    $scope.imgupload = true; 
    $scope.$apply() 
    $scope.image = ele.files[0]; 
    $scope.imgupload = false; 
    $scope.$apply() 
}