Question

我有工作代码在发布到API之前将图像存储在内存中。但是，将该文件加载到内存中可能需要一些时间。我需要一种方法来显示文件正在加载。

我有一个微调器图标，我可以使用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

我明白了。这不是readimg中的代码没有运行，或者我后来添加的标志没有设置，而是绑定直到它返回后才更新。

以下是我的快速解决方法：

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

Answer 2

您可以使用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

如何显示文件正在上传？

2 个答案: