javascript - angularjs - 如何在不使用 getElementById 的情况下获取输入标签中的文件属性

Question

我正在使用 AngularJS 上传文件。 如何像普通 JS 一样获取输入文件？

这正是我需要模拟的
HTML:

<input type="file" name="file" id="fileImg" accept="image/*">

JS:

var filesUpload = document.getElementById("fileImg").files

这就是我现在拥有的
HTML:

<input type="file" name="file" ng-model="image" accept="image/*">
<input type="button" ng-click="submit()" value="press me">

Angular :

angular
        .module('app')
        .controller("productsCtrl", function($scope) {

            $scope.image = {};


            $scope.submit = function() {

                var filesUpload = ????????????????
            }
         }

那么，如何使用“getElementById”获取输入中的"file"呢？
注意 - 不能改变任何东西，只能改变“??????”

任何帮助将不胜感激..
发送

Answer 1

你可以使用自定义指令

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

app.controller('Main', function($scope, $timeout, $rootScope){
    $scope.onSubmit = function(){
        console.log($scope.file);
    }
});

app.directive('fileRead', [function () {
    return {
       scope: {
        fileRead: '='
       },
       link: function (scope, elem, attrs) {
           elem.bind('change', function (event) {
             scope.$apply(function () {
                scope.fileRead = event.target.files[0];
             });
           });
       }
    }
 }]);

用法

 <div ng-app="App">
    <div ng-controller="Main">
        <form ng-submit="onSubmit()">
            <input type="file" name="someName" file-read="file">
            <button type="submit">Submit</button>
        </form>
    </div>
 </div>