使用angularjs上传具有多个图像的图像库

时间:2019-01-26 20:18:32

标签: angularjs

我正在尝试创建一个包含多个图像库的表单,其中最多包含五个与此图像相似的图像(http://prntscr.com/mcl2ay) ![图片库] [1] 我如何创建像这样的图像库,并能够用angular 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>

0 个答案:

没有答案