Галерея изображений с несколькими загрузками изображений с angularjs - PullRequest
0 голосов
/ 26 января 2019

Я пытаюсь создать форму с несколькими галереями изображений, которая включает до пяти изображений, похожих на эту (http://prntscr.com/mcl2ay)! [Галерея изображений] [1], как я могу создать галерею изображений, как это, и чтобы иметь возможностьзаменить / удалить каждое изображение угловым js? спасибо за вашу помощь. Это код, который у меня есть до сих пор .. https://jsfiddle.net/eladnm/gzvh8cbm/1/

Я ожидаю, что смогу загрузить 5 изображений, как показано с изображениями ивозможность редактировать каждый - заменить / удалить

        var app =  angular.module('main-App',[]);


    app.controller('AdminController', function($scope, $http) {


      $scope.form = [];
      $scope.files = [];


      $scope.submit = function() {
        $scope.form.image = $scope.files[0];


        $http({
          method  : 'POST',
          url     : 'upload.php',
          processData: false,
          transformRequest: function (data) {
              var formData = new FormData();
              formData.append("image", $scope.form.image);
              return formData;
          },
          data : $scope.form,
          headers: {
                 'Content-Type': undefined
          }
       }).success(function(data){
            alert(data);
       });


      };


$scope.uploadedFile = function(element) {

    if(element.files[0].type === "image/jpeg" || element.files[0].type=== "image/gif" || element.files[0].type ==="image/png"){
        if(element.files[0].size<10485760){
            if(element.files.length < 5){
        $scope.currentFile = element.files[0];

        var reader = new FileReader();


        reader.onload = function(event) {
          $scope.image_source = event.target.result
          $scope.$apply(function($scope) {
            $scope.files = element.files;
          });
        }
                reader.readAsDataURL(element.files[0]);
            }
            else{
                alert("too many files")
                }
        }
        else{
                alert("File too Large")
            }
    }
    else{
            alert("Not An Image")
        }
}
    });
    <form ng-submit="submit()" name="form" role="form">


  <input ng-model="form.image" type="file" class="form-control input-lg" accept="image/*" onchange="angular.element(this).scope().uploadedFile(this)" style="width:400px" >
  <input type="submit" id="submit" value="Submit" />
  <br/>
  <img ng-src="{{image_source}}" style="width:300px;">


</form>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...