在角度js的每一行表中上传文件

我有一个表，并且用户将在表格行中输入详细信息并在每行中浏览相应的图像。我在使用角度js时做了这些。在挣扎之后很多，我做了第一行。现在我不知道如何使用相同的概念为每一行重复此操作。请帮忙。提前致谢。下面是我的代码..在角度js的每一行表中上传文件

<body ng-app = "myApp"> 

    <table class="table"> 
     <thead> <th>Stu Name</th> <th>Photo</th> </thead> 

     <tr> 
      <td> </td> 
      <td> 
       <input data-my-Directive type="file" name="file" id="fileUpload" style="display: none;"> 
       <img id="imgUpload" width="140px" height="150px" style="border-style: dashed; border-color: grey;"> 
      </td> 
     </tr> 

    </table> 

    <script type="text/javascript"> 
     $("#imgUpload").click(function(){   
      $("#fileUpload").click(); 
     }) 
    </script> 
    </body>

js代码

var app = angular.module('myApp', []); 

app.directive('myDirective', function (httpPostFactory) { 
    return { 
     restrict: 'A', 
     scope: true, 
     link: function (scope, element, attr) { 

      element.bind('change', function() 
      { 
       var formData = new FormData(); 
       formData.append('file', element[0].files[0]); 
       httpPostFactory('upload_image.php', formData, function (callback) { 
        // recieve image name to use in a ng-src 
        console.log(callback);      
        $('#imgUpload').attr("src",'images/' + callback); 
       }); 
      }); 

     } 
    }; 
}); 

app.factory('httpPostFactory', function ($http) { 
    return function (file, data, callback) { 
     $http({ 
      url: file, 
      method: "POST", 
      data: data, 
      headers: {'Content-Type': undefined} 
     }).success(function (response) { 
      callback(response); 
     }); 
    }; 
});

来源

2017-06-15 srinivasan

可以使用ng-repeat遍历DOM来添加多行

angular.module("app",[]) 
 
.controller("ctrl",function($scope){ 
 
$scope.tableArr = ['one','two'] 
 

 
}) 
 
.directive('myDirective', function (httpPostFactory) { 
 
    return { 
 
     restrict: 'A', 
 
     scope: { 
 
      myDirective : '=myDirective' 
 
     }, 
 
     link: function (scope, element, attr) { 
 

 
      element.bind('change', function() 
 
      { 
 
       var formData = new FormData(); 
 
       formData.append('file', element[0].files[0]); 
 
       httpPostFactory('upload_image.php', formData) 
 
       .then(function(response){ 
 
         $('#imgUpload'+scope.myDirective).attr("src",'images/' + response.data); 
 
       }) 
 
      }); 
 

 
     } 
 
    }; 
 
}) .factory('httpPostFactory', function ($http) { 
 
    return function (file, data) { 
 
     $http({ 
 
      url: file, 
 
      method: "POST", 
 
      data: data, 
 
      headers: {'Content-Type': undefined} 
 
     }) 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
<table class="table"> 
 
     <thead> <th>Stu Name</th> <th>Photo</th> </thead> 
 
     <tr ng-repeat="item in tableArr"> 
 
      <td> </td> 
 
      <td> 
 
       <input data-my-Directive="$index" type="file" name="file" id="fileUpload" style="display: none;"> 
 
       <img id="imgUpload{{$index}}" width="140px" height="150px" style="border-style: dashed; border-color: grey;"> 
 
      </td> 
 
     </tr> 
 

 
    </table> 
 
</div>

来源

2017-06-15 19:07:10

我不能使用在这里重复。因为它没有报告。它就像网格一样，用户将添加行并添加学生的详细信息..有没有什么方法可以不使用ng-repear – srinivasan

在角度js的每一行表中上传文件

回答

相关问题