Question

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

<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按钮时，一个图像上传行将消除。我的控制器端代码如下所示。< / p>

$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}});
}

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

2 个答案: