Question

我正在尝试将文件传递到函数中，其中文件源自input类型的文件。我的代码看起来像这样。

<input type="file" id="scvFileUploadId"/>

<button id="uploadFilesubmit" ng-click"ctrl.uploadFile()">Upload</button>

简而言之，我想将已添加到输入中的文件传递给单击按钮时触发的ng-click属性函数的参数。我认为这可能很简单，但我现在无法绕过它。

我正在尝试这样做。

<input type="file" id="scvFileUploadId"/>

<button id="uploadFilesubmit" ng-click"ctrl.uploadFile(#scvFileUploadId.file)">Upload</button>

Answer 1

我的解决方案是使用Angular的元素选择器指向保存文件的input元素，然后将其结果作为参数传递给函数，如下所示：

<input type="file" id="scvFileUploadId" />

<button id="uploadFilesubmit" onclick="angular.element(this).controller().uploadFile(angular.element(document.querySelector('#csvFileUploadID'))[0].files[0])">Upload</button>

我不确定这个解决方案是否是最强的＆＃39; Angular＆＃39;这样做的方法，但是现有的解决方法是因为在应用程序的这一部分上完成了Angular输入文件上传而导致我不能支持DOM，所以这在我的场景中就足够了。

Answer 2

我强烈建议使用社区创建的现有指令;

但是如果你受到限制并想避开第三方，你可以看到这个实现：

ng-model for <input type="file"/>

<input type="file" fileread="vm.uploadme" />
<button id="uploadFilesubmit" ng-click"ctrl.uploadFile(vm.uploadme)">Upload</button>

Answer 3

您可以使用简单的directive与NgModelController一起为input type='file'添加ngModel支持，例如：

angular.module('myApp', [])
.controller('TestUploadController', ['$scope', function ($scope) {
    var ctrl = this;
  
    ctrl.imageFile = null;
    
    ctrl.clearFile = clearFile;
    ctrl.uploadFile = uploadFile;
    
    function clearFile() {
      ctrl.imageFile = null;
    }
    
    function uploadFile(file) {
      if (file) {
        console.log('Upload: ', file);
      }
    }
}])
.directive('fileUpload', [function () {
  return {
    require: "ngModel",
    restrict: 'A',
    link: function ($scope, el, attrs, ngModel) {
      function onChange (event) {
        //update bindings with $applyAsync
        $scope.$applyAsync(function(){
          ngModel.$setViewValue(event.target.files[0]);
        });
      }
      //change event handler
      el.on('change', onChange);
      
      //set up a $watch for the ngModel.$viewValue
      $scope.$watch(function () {
        return ngModel.$viewValue;
      }, function (value) {
        //clear input value if model was cleared
        if (!value) {
          el.val("");
        }
      });
      //remove change event handler on $destroy
      $scope.$on('$destroy', function(){
        el.off('change', onChange);
      });
    }
  };
}]);

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.angularjs.org/1.6.2/angular.js"></script>

<div ng-app="myApp">
  <div ng-controller="TestUploadController as $ctrl">
    <input type="file" file-upload ng-model="$ctrl.imageFile" />
    <input type="button" ng-click="$ctrl.uploadFile($ctrl.imageFile)" value="Upload" />
    <input type="button" ng-click="$ctrl.clearFile()" value="Reset" />
    <div ng-if="$ctrl.imageFile">
      {{$ctrl.imageFile.name}}<br />
      {{$ctrl.imageFile.size}} byte(s)<br/>
      {{$ctrl.imageFile.type}}
    </div>
  </div>
</div>

从ng-click属性中选择另一个HTML元素

3 个答案: