AngularJS: In base64 Bild Array

Question

Ich habe ein Bild hochladen, die das Bild in meinem Controller bestätigt, habe ich dann mit dem Benutzer das Bild klicken, um hinzuzufügen, wenn der Benutzer dann ein neues Bild hochgeladen und fügt Bild auf das Array um das günstige Bild und das neue Bild zu zeigen.

Derzeit, wenn ich ein neues Bild hochladen, wird es das Bild im Array ändern.

Gibt es eine einfache Möglichkeit, meinen Code zu ändern, um dies zu beheben?

Sommerliche

Also nur zu klären, wenn ich Add Image klicken Ich möchte das aktuelle Bild auf den Array hinzufügen, wenn ich neues Bild hochladen und füge Bild Ich wünsche das neue Bild zu dem Array hinzufügen und Behalten Sie das ursprüngliche Bild bei.

Derzeit, wenn ich ein neues Bild hinzufügen über Rechte das Array.

Bitte Siehe 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

Am Ende habe ich es geschrieben habe anders

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