Question

我只是按照本文中提到的方式上传文件https://www.tutorialspoint.com/angularjs/angularjs_upload_file.htm链接：

function(scope, element, attrs) {
        var model = $parse(attrs.fileModel);
        var modelSetter = model.assign;

        element.bind('change', function(){
            scope.$apply(function(){
                console.log("len:"+element[0].files);
               modelSetter(scope, element[0].files);
                console.log("filenames:"+element[0].files);
            });
        });

这里当我调试元素时不包含任何称为文件的属性，所以我总是将其视为未定义。我尝试了很多不同的方法，都是由同样的问题引起的。如何解决这个问题？为什么元素没有文件属性？

Answer 1

我的文件上传指令代码

  module.directive('fileModel', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;

            element.bind('change', function(){
                scope.$apply(function(){
                    modelSetter(scope, element[0].files[0]);
                });
            });
        }
    };
}]);

和使用代码

<input class="import-export-hide-fileinput" type="file" id="file" file-model="ctrl.fileToImport" name="file"
                   accept="undefined">

Serivce致电

mySerice.importReports(self.fileToImport)
                        .then(self.onImportSuccess, self.onError);

服务代码

importReports: function (fileInput) {
            var fd = new FormData();
            fd.append('file', fileInput);
            return $http.post('/path/import', fd, {
                transformRequest: angular.identity,
                headers: {'Content-Type': undefined}
            });
        },

Answer 2

在HTML中：

<input type="file" id="file" name="file"/>
<button ng-click="upload()">Upload</button>

在控制器中：

$scope.upload= function() {
    var f = document.getElementById('file').files[0],
        r = new FileReader();

    r.onloadend = function(e) {
      var data = e.target.result;
      //send your binary data via $http or $resource or do anything else with it
    }

    r.readAsBinaryString(f);
}

希望它有帮助..！

使用Angular JS上传文件无效

2 个答案: