Question

在以下代码中，文件对象打印为未定义的原因？

HTML

<input  type="file" name="issueFile" file-model="jsfile"> 
<a class="btn pull-right" ng-click="create()">Create</a>

控制器

$scope.cancel = function () {
  var fd = new FormData();
  angular.forEach($scope.jsfile,function(file){
                fd.append('file',file);
 });
  fd.append('formdata',JSON.stringify(jsondata));
            $http.post('admin/managecuisineAdd',fd,{
                transformRequest:angular.identity,
                 headers:{'Content-type':undefined}
             }).success(function(data){
                 $scope.status=data;
                 $scope.itemlist.push(data)
                 $scope.message="New Dish Added Successfully"
  });
}

Answer 1

据我所知，没有support for input[type="file"] binding。

我使用自定义指令触发change事件并填充变量。

.directive('ngFileSelect', [ '$parse', '$timeout', function($parse, $timeout) {
    return function(scope, elem, attr) {
            var fn = $parse(attr['ngFileSelect']);
            elem.bind('change', function(evt) {
                var files = [], fileList, i;
                fileList = evt.target.files;
                if (fileList != null) {
                    for (i = 0; i < fileList.length; i++) {
                        files.push(fileList.item(i));
                    }
                }
                $timeout(function() {
                    fn(scope, {
                        $files : files,
                        $event : evt
                    });
                });
            });
        };
    }])

在我的HTML中，我使用它：

<input ng-file-select="onFileSelect($files)" type="file">

在我的控制器中：

$scope.onFileSelect = function (files) {
     console.info('files', files);
};

Answer 2

Angular不会绑定到开箱即用的文件输入。你可以试试这样丑陋的黑客：

<input type="file" multiple onchange="angular.element(this).scope().fileNameChanged(this)">

或者使用像https://github.com/danialfarid/ng-file-upload

这样的指令

angularjs文件对象未定义

2 个答案: