如何在 AngularJS 中读取文件？

Posted 2023-02-15

【中文标题】如何在 AngularJS 中读取文件？

【英文标题】：How to read a file in AngularJS?

【发布时间】：2013-09-21 06:05:53

【问题描述】：

是否可以在 AngularJS 中读取文件？我想将文件放入 html5 画布中进行裁剪。

我正在考虑使用指令？这是我要放入指令中的 javascript 代码：

function readURL(input) 

    if (input.files && input.files[0]) 
        var reader = new FileReader();

        reader.onload = function (e) 
            $('#blah').attr('src', e.target.result);
        

        reader.readAsDataURL(input.files[0]);
    

【参考方案1】：

是的，指令是正确的方法，但看起来有点不同：

.directive("ngFileSelect",function()    
  return 
    link: function($scope,el)          
      el.bind("change", function(e)          
        $scope.file = (e.srcElement || e.target).files[0];
        $scope.getFile();
      );          
            
  
)

工作示例：http://plnkr.co/edit/y5n16v?p=preview

感谢 lalalalalmbda 提供this link。

【讨论】：

是否可以在没有“更改”事件的情况下读取文件？例如，当单击编辑按钮打开引导模式并将值设置为来自先前加载的数据的输入文件时？

【参考方案2】：

我采用了 Cherniv 的代码并将其全部折叠成一个指令：

.directive('fileSelect', ['$window', function ($window) 
    return 
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, el, attr, ctrl) 
            var fileReader = new $window.FileReader();

            fileReader.onload = function () 
                ctrl.$setViewValue(fileReader.result);

                if ('fileLoaded' in attr) 
                    scope.$eval(attr['fileLoaded']);
                
            ;

            fileReader.onprogress = function (event) 
                if ('fileProgress' in attr) 
                    scope.$eval(attr['fileProgress'], 
                    '$total': event.total, '$loaded': event.loaded);
                
            ;

            fileReader.onerror = function () 
                if ('fileError' in attr) 
                    scope.$eval(attr['fileError'], 
                    '$error': fileReader.error);
                
            ;

            var fileType = attr['fileSelect'];

            el.bind('change', function (e) 
                var fileName = e.target.files[0];

                if (fileType === '' || fileType === 'text') 
                    fileReader.readAsText(fileName);
                 else if (fileType === 'data') 
                    fileReader.readAsDataURL(fileName);
                
            );
        
    ;
]);

然后您可以按如下方式使用该指令：

<input type="file" ng-model="file.data" 
       file-select="data" 
       file-loaded="myLoaded()"
       file-error="myError($error)" 
       file-progress="myProgress($total,$loaded)">

“file.data”、“myLoaded”、“myError”和“myProgress”在封闭范围内。

【参考方案3】：

Angular 文件阅读器。

link: function(scope, element, attrs) 
            element.on('change', function(e) 
                var reader = new FileReader();
                reader.onload = function(e) 
                    scope.$apply(function() 
                       scope.onReadFile($content:e.target.result);
                    );
                ;
                reader.readAsText((e.srcElement || e.target).files[0]);
            );
        

现场示例：Live Run On Plunker