0

次の html は、アップロードする画像を選択するために使用されます

<input type="file" id="files" ngf-select="select(files)" ng-model="files" name="file" accept="image/*" ngf-max-size="'2MB'" required ngf-multiple="true">

次のhtmlを使用して、選択した画像をサムネイルとして表示し、選択したファイルをアップロードする前にキャンセルするボタンを付けています。

<div ng-repeat="f in files track by $index">
      <div ng-show="f.type.indexOf('image') > -1">    
      <img ngf-src="f" class="thumb">

          <button class= "btn btn-warning btn-cancel" ng-disabled="!myForm.$valid" 
              ng-click="cancelPic($index)">Cancel</button> 

          <br><br>
          <p>{{f.name}}</p>
          <br>
          <span class="progress" ng-show="f.progress >= 0">
            <div style="width:{{f.progress}}%" 
                  ng-bind="f.progress + '%'"></div>
          </span>
          <hr>
      </div>    
      </div>

キャンセルボタンがクリックされたときのコントローラーで：

$scope.cancelPic = function(index) {

        $scope.files[index] = undefined;

        //$scope.files.length--;
      }

これは、選択した画像とそのキャンセル ボタンを (ng-show 経由で) 削除するために機能します。問題は、ファイルがアップロードされたときです。ここにアップロード機能があります

$scope.uploadPic = function(files) {
      for(var i = 0; i < $scope.files.length; i++) {
        var $file = $scope.files[i];
        (function(index) {
          $scope.upload[index] = Upload.upload({
            url: '/',
            method: 'POST',
            file: $file,
          }).progress(function (evt) {
              //error here
              $scope.files[index].progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
          }).then(function (response) {
            $timeout(function () {
            $file.result = response.data;
          });
          }, function (response) {
            if (response.status > 0)
            $scope.errorMsg = response.status + ': ' + response.data;
          });
          })(i);

          }
        }
      }]);

次のエラーがあります。

TypeError: Cannot set property 'progress' of undefined
    at userCtrl.js:58

これはエラーのある行です:

$scope.files[index].progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));

cancelPic 関数はインデックス値を変更しません。3 つのファイルが選択され、1 つが cancelPic で削除された場合、インデックスの値は 3 のままです。files.length を次のようにデクリメントする行を追加しました。

$scope.files.length--;

どちらがインデックスを2に減らしますが、以前と同じようにエラーが発生し、さらに1つのファイルがcancelPicで削除されると、選択したファイルから2つが削除されますか? 私はそのことに少し当惑していません。

cancelPic 関数のロジックが間違っていると思います。

4

1 に答える 1