AngularJS：添加base64图像到数组

Question

我有一个图像上传，验证我的控制器中的图像，然后用户点击添加图像，如果用户然后上传一个新的图像并添加图像到数组展现吉祥形象和新形象。

目前，如果我上传一个新的图像它会改变数组中的图像。

有没有简单的方法来改变我的代码来解决这个问题？

综述

所以我只想澄清，当我点击Add Image我希望目前的图像添加到阵列中，当我上传新的图片，并添加像我希望新的图像添加到阵列和保持原始图像。

目前如果我添加新的形象它通过权利阵列。

请参见Fiddle

HTML

<div ng-controller="UpLoadImage"> 

    <img style="height: 100px; width: 100px" ng-src="{{preview}}" alt="preview image"> 
    <label for="file">Select File</label> 
    <input ng-model="file" type='file' ng-model-instant name='file' id='fileinput' 
      accept='image/*' onchange='angular.element(this).scope().first(this)'/> 

    {{uploadError}} 

    <button ng-click="addImage()">Add image</button> 
    <div ng-repeat="creative in creative"> 
     <img style="height: 100px; width: 100px" ng-src="{{preview}}" alt="preview image"> 
    </div> 


</div> 

的JavaScript

angular.module('myApp', []) 

.controller('UpLoadImage', function ($scope, $http, $timeout) { 
    $scope.preview = 'img/download.png'; 
    $scope.first =function(){ 
     console.log('we are here'); 
     input = document.getElementById('fileinput'); 
     file = input.files[0]; 
     size = file.size; 
     if(size < 650000){ 
      var fr = new FileReader; 
      fr.onload = function(e){ 
       var img = new Image; 

       img.onload = function(){ 
        var width = img.width; 
        var height = img.height; 
        if(width == 1920 && height == 1080){ 
         console.log(e.target.result); 
         $scope.preview = e.target.result; 
         window.alert("perfect"); 
         $scope.$apply(); 

        }else{ 
         window.alert("incorrect definitions"); 
         console.log(width,height); 
         $scope.$apply(); 
        } 
       }; 
       img.src = fr.result; 
      }; 

      fr.readAsDataURL(file); 
     }else{ 
      window.alert("to big"); 
      console.log('file size to big') 

     } 

    }; 

     $scope.foo = "base64 image here"; 
     $scope.creative = []; 

     $scope.addImage = function() { 
      $scope.creative.push($scope.creative.length); 
     }; 
}); 

Answer 1

在最后，我写的不同

HTML

<div ng-controller="UpLoadImage"> 

<img style="height: 100px; width: 100px" ng-src="{{preview}}" alt="preview image"> 
<label for="file">Select File</label> 
<input ng-model="file" type='file' ng-model-instant name='file' id='fileinput' 
     accept='image/*' onchange='angular.element(this).scope().first(this)'/> 

{{uploadError}} 

<button ng-click="addImage()">Add image</button> 
<div ng-repeat="slot in slots"> 
    <img style="height: 100px; width: 100px" ng-src="{{slot.image}}" alt="preview image"> 
</div> 

的JavaScript

angular.module('myApp', []) 

.controller('UpLoadImage', function ($scope, $http, $timeout) { 


    $scope.preview = 'img/download.png'; 
    $scope.slots=[]; 
    $scope.maxSlots = 5; // this dynamic 

    $scope.first =function(){ 
     console.log('we are here'); 
     input = document.getElementById('fileinput'); 
     file = input.files[0]; 
     size = file.size; 
     if(size < 650000){ 
      var fr = new FileReader; 
      fr.onload = function(e){ 
       var img = new Image; 

       img.onload = function(){ 
        var width = img.width; 
        var height = img.height; 
        if(width == 1920 && height == 1080){ 
         console.log(e.target.result); 
         $scope.preview = e.target.result; 
         window.alert("perfect"); 
         $scope.$apply(); 

        }else{ 
         window.alert("incorrect definitions"); 
         console.log(width,height); 
         $scope.$apply(); 
        } 
       }; 
       img.src = fr.result; 
      }; 

      fr.readAsDataURL(file); 
     }else{ 
      window.alert("to big"); 
      console.log('file size to big') 

     } 
    }; 

    $scope.foo = "base64 image here"; 


    $scope.addImage = function() { 
     if($scope.slots.length < $scope.maxSlots){ 
      $scope.slots.push({"image":$scope.preview}); 

     }else{ 
      window.alert("you have to delete a slot to generate a new one"); 
      console.log('you have to delete a slot to generate a new one') 
     } 
    }; 
});