使用Angular.js上传后如何在数组中收集多个文件

Question

我需要一个帮助。我的应用程序中有多个文件上传功能。在这里我需要将所有文件收集到一个数组中，以便我可以上传这些文件并在选择后显示它们。我在下面解释我的代码。

<div class="input-group bmargindiv1 col-md-12" ng-repeat="mul in mulImage">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Image{{$index+1}}:</span>
 <div>
<div ng-class="{'myError': billdata.uploadme_{{$index}}.$touched && billdata.uploadme_{{$index}}.$invalid }">
<input type="file" class="filestyle form-control" data-size="lg" name="upload_{{$index}}" id="bannerimage_{{$index}}"  ng-model="mul.image" ngf-pattern="'image/*'" accept="image/*" ngf-max-size="2MB" ngf-min-height="400" ngf-resize="{width: 400, height:400}"  ngf-select="onFileSelect('upload_{{$index}}',mul.image);">
<div style="clear:both;"></div>
</div>
</div>
<span class="input-group-btn" ng-show="showImage{{$index}}">
<img ng-src="{{attachmultipleimage_$index}}" name="pro" border="0" style="width:32px; height:32px; border:#808080 1px solid;">
<input type="button" class="btn btn-success" name="plus" id="plus" value="+" ng-click="addNewImageRow(mulImage);" ng-show="$last"> <input type="button" class="btn btn-danger" name="minus" id="minus" value="-"  ng-show="mulImage.length>1" ng-click="deleteNewImageRow(mulImage,$index);">
 </span>
 <div class="help-block" ng-messages="billdata.uploadme_{{$index}}.$error" ng-if="billdata.uploadme_{{$index}}.$touched">
 <p ng-message="maxSize" style="color:#F00;">File is too large.Max size is 2 mb.</p>
 <p ng-message="minHeight" style="color:#F00;">Minimum height should be 400px</p>
</div>
 </div>
 </div>

在这里，当我点击plus 按钮时，正在创建一个新的图像行，同样，当我点击minus 按钮时，将删除一个图像上传行。我的控制器端代码如下。

$scope.mulImage=[];
   $scope.mulImage.push({'image':null});
   $scope.addNewImageRow=function(mulImage){
       mulImage.push({'image':null});
   }
   $scope.deleteNewImageRow=function(mulImage,index){
       mulImage.splice(index,1);
   }
   $scope.onFileSelect = function(name,$files,index) {
        var files =$files;
        for (var i = 0; i < files.length; i++) {
             var file = files[i];
             var reader = new FileReader();
             reader.onload = $scope.imageIsLoaded(index); 
             reader.readAsDataURL(file);
        }
   }

我已经做了一些事情。这里我需要在每个新创建的行中显示选定的图像 (img ng-src="{{attachmultipleimage_$index}}") 并收集所有选定的文件以上传。请帮助我。

Answer 1

看起来angular-file-upload 更适合你，因为它内置了这个功能。它的file uploader instance 有一个数组queue，其中包含所有选定的文件，并且还有很多帮助方法。

this example 做你想做的事，选择多个图像文件并预览它们。

主要代码是：

angular.module('app', ['angularFileUpload'])
  .controller('AppController', ['$scope', 'FileUploader',
      function($scope, FileUploader) {
        // create an instance
        $scope.uploader = new FileUploader({
          url: 'upload.php'
        });
      });

然后你可以像这样使用它：

<input type="file" nv-file-select="" uploader="uploader" multiple />
<br/>
<div ng-repeat="item in uploader.queue">
  <strong>{{ item.file.name }}</strong>
  <div ng-show="uploader.isHTML5" ng-thumb="{ file: item._file, height: 100 }"></div>
</div>

ng-thumb 是作者为图片预览示例编写的指令。

简而言之，只要抓住这个image-preview 并在必要时对其进行修改

Answer 2

以下将允许将文件添加到队列中并删除它们。关键是使用ngf-keep="true"。

<button ngf-select ng-model="allFiles" ngf-keep="true">Add File</button>

<div ng-repeat="f in allFiles">
    <img ngf-thumbnail="f">
    <button ng-click="removeFile($index)">delete</button>
</div>

<button ng-click="upload()">upload all</button>


$scope.removeFile = function(index) {
    $scope.allFiles.splice($index, 1);
    $scope.allFiles = $scope.allFiles.slice(0);
}

$scope.upload = function() {
    Upload.upload({..., data: {file: allFiles}});
}