Question

单击“提交”按钮时，如何获取文件内容。我只获得第一和第二输入。请参阅代码段：

＆＃13;

!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="formCtrl">
  <form novalidate>
    First Name:<br>
    <input type="text" ng-model="user.firstName"><br>
    Last Name:<br>
    <input type="text" ng-model="user.lastName">
    <input type="file" ng-model="user.file">
    <br><br>
    <button ng-click="reset()">Submit</button>
  </form>
  <p>form = {{user}}</p>
  <p>master = {{master}}</p>
</div>
  <script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
   $scope.reset = function(){
   console.log($scope.user)
   }
   
});
</script>

</body>
</html>

＆＃13;

Answer 1

您无法使用val result = sc .sequenceFile[Text, IntWritable]("file:///home/user/outputfiles/seqFileDemo1") .map(tup => (tup._1.toString, tup._2.get())) .collect()直接访问文件内容，但您可以使用原生JavaScript FileAPI读取文件内容。这是一个working fiddle。我想你想显示文件内容而不在服务器端上传它们。它不是100％清楚你想要的，所以你可以在浏览器中获得 filecontent ， filesize 和文件名而无需上传。

视图

ng-scopes

AngularJS App

<div ng-controller="MyCtrl">
  <input type="file" id="myFileInput" />
  <br /><br />
  <button ng-click="submit()">
    Submit
  </button>
  <br /><br />
  <br /><br />
  <h1>
    Filename: {{ fileName }}
  </h1>
  <h2>
    File size: {{ fileSize }} Bytes
  </h2>
  <h2>
    File Content: {{ fileContent }}
  </h2>
</div>

Answer 2

我使用了一个指令来处理表单中的文件（正如the answer here中的joakimbl所建议的那样）：

app.directive('validFile',[function() {
  return {
    require : 'ngModel',
    scope : {format: '@', upload : '&upload'},
    link : function(scope, el, attrs, ngModel) {
      // change event is fired when file is selected
      el.bind('change', function(event) {
        console.log(event.target.files[0]);
        scope.upload({file:event.target.files[0]});
        scope.$apply(function() {
          ngModel.$setViewValue(el.val());
          ngModel.$render();
        });
      })
    }
  }
}]);

HTML中的

<input type="file" valid-file upload="uploadFile(file)" ng-model="file">

此处uploadFile将是您的控制器中的一个功能，您可以在其中获取文件

的上下文

控制器代码

$scope.uploadFile = function(element) {
    $scope.user.file = element;
    console.log($scope.user);
  }

请查看此plunker

如何在AngularJS

2 个答案:

视图

AngularJS App