无法使用 Angular.js 在数组中按顺序获取文件

Question

我在 Angular.js 中使用 ng-file-upload 上传多个文件时遇到一个问题。我先在下面解释我的代码。

<input type="file" class="filestyle form-control" data-size="lg" name="bannerimage" id="bannerimage"  ng-model="file" ngf-pattern="'image/*'" accept="image/*" ngf-max-size="2MB" ngf-min-height="100" ngf-resize="{width: 100, height: 100}"  custom-on-change="uploadFile" required="required" ngf-select="onFileSelect($file);"  ngf-multiple="true">
</div>
<label for="bannerimage" accesskey="B" ><span class="required">*</span> View Image</labe
<div style="padding-bottom:10px;" ng-repeat="pht in stepsModel">
<img ng-src="{{pht.image}}" border="0" name="bannerimage" style="width:70px; height:70px;" id="imgId">
</div>

我的控制器端代码如下。

$scope.stepsModel = [];
    $scope.allFiles=[];
    $scope.uploadFile = function(event){
        console.log('event',event.target.files);
        var files = event.target.files;
        for (var i = 0; i < files.length; i++) {
         var file = files[i];
             var reader = new FileReader();
             reader.onload = $scope.imageIsLoaded; 
             reader.readAsDataURL(file);
     }
    };
    $scope.imageIsLoaded = function(e){
    $scope.$apply(function() {
        var data={'image':e.target.result};
        $scope.stepsModel.push(data)
    });
}
$scope.submitImage=function(){
    console.log('all files',$scope.allFiles);
}
$scope.onFileSelect = function($files) {
         $scope.allFiles.push($files);

}

我的问题是，当我在 submitImage 函数中出现的控制台消息中检查图像 url 的编号时，它的出现如下所示。

all files [Blob, null, Blob, null, Blob]
0: Blob

1: null   
2: Blob  
3: null    
4: Blob 

Objectlength: 5v

这里我只上传了 3 个文件，但显示的是长度 5 意味着它不是连续出现的假设第 0 个索引有一个文件然后下一个文件占用第二个 index.Here 我需要所有文件应该来serially.Please帮助我。

Answer 1

我想首先你需要检查为什么数组中有空元素。在 onFileSelect 函数中放置一个日志，并在选择每个文件后检查 allFiles 数组。

无法使用 Angular.js 在数组中按顺序获取文件

Can not get files orderly in an array using Angular.js

javascript

angularjs

ng-file-upload