Sur Enregistrer Créer un objet et le publier sur le point de terminaison

Je ne sais pas, mais je ne suis pas sûr de savoir comment faire.Sur Enregistrer Créer un objet et le publier sur le point de terminaison

J'ai un programme dans lequel vous téléchargez l'image (base64) puis ajouter à un tableau mis à un maximum de 5.

Je puis quoi cliquer sur un bouton Save et afficher

Ce que je veux

Au clic de Save, ajoutez chaque image à un tableau d'objets et ajoutez le code de base 64 comme valeur base_image chaque image aura son propre slot_id.

pour voir le programme de travail actuel s'il vous plaît voir Fiddle

{ 
      "c_name": "Name of the campaign", 
      "max_slots": 5, 
      "slots": [ 
      { 
       "slot_id": 1, 
       "base_image": $scope.preview, 
      }, 
      { 
       "slot_id": 2, 
       "base_image": $scope.preview, 
      }, 
      { 
       "slot_id": 3, 
       "base_image": $scope.preview, 
      }, 
      { 
       "slot_id": 4, 
       "base_image": $scope.preview, 
      }, 
      { 
       "slot_id": 5, 
       "base_image": $scope.preview, 
      } 
     ] 
     }

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

     $scope.SaveImage = function() { 

      //post object array here 

     }; 
    });

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<!DOCTYPE html> 
<html lang="en" ng-app='myApp'> 
<head> 
    <meta charset="UTF-8"> 
    <title>Angular Base64 Upload Demo</title> 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="style.css"> 
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script> 
    <script type="text/javascript" 
      src="//cdn.rawgit.com/adonespitogo/angular-base64-upload/master/src/angular-base64-upload.js"></script> 
    <script type="text/javascript" src="app.js"></script> 

</head> 
<body> 

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

    <button ng-click="SaveImage()">Save</button> 


</div> 


</body> 
</html>

Source

2017-09-22 Beep

J'ai changé le $scope.addImage fonction avec quelques modifications à la définition d'objet slots array. A également changé le ng-repeat pour répondre à ces modifications de propriété d'objet. Voir le code ci-dessous.

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.addImage = function() { 
 
     if ($scope.slots.length < $scope.maxSlots) { 
 
     $scope.slots.push({ 
 
      "slot_id": $scope.slots.length + 1, 
 
      "base_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') 
 
     } 
 
    }; 
 

 
    $scope.SaveImage = function() { 
 

 
     //post object here 
 
     var object = { 
 
     "c_name": "Name of the campaign", 
 
     "max_slots": $scope.maxSlots, 
 
     "slots": $scope.slots 
 
     } 
 

 
    }; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html lang="en" ng-app='myApp'> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Angular Base64 Upload Demo</title> 
 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script> 
 
    <script type="text/javascript" src="//cdn.rawgit.com/adonespitogo/angular-base64-upload/master/src/angular-base64-upload.js"></script> 
 
    <script type="text/javascript" src="app.js"></script> 
 

 
</head> 
 

 
<body> 
 

 
    <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.base_image}}" alt="preview image"> 
 
    </div> 
 

 
    <button ng-click="SaveImage()">Save</button> 
 

 

 
    </div> 
 

 

 
</body> 
 

 
</html>

Source

2017-09-22 16:15:10 Thusitha

Wow semble bon merci, et l'objet de poste ressemblerait bien? – Beep

@Beep Exactement comme vous avez posté sur la question. Si vous pensez que cela vous a été utile, vous pouvez la marquer comme la bonne réponse et la rejeter;) – Thusitha

Sur Enregistrer Créer un objet et le publier sur le point de terminaison

Répondre

Questions connexes