如何将多个文件添加到数组中并在 AngularJs 中逐个访问文件

How to add multiple files into a array and access files one by one in AngularJs

本文关键字:文件 AngularJs 访问 添加 数组      更新时间:2023-09-26

我正在尝试将多个文件添加到文件数组中,稍后访问每个文件 AngularJs.So 到目前为止,我创建了一个自定义指令来读取文件,查看一些 posts.it 在单个文件上工作正常。但我的要求是我想上传多个文件并将它们添加到数组中,然后在访问数据时访问创建的文件数组。我是AngularJs的新手,请帮助我实现这一目标。

网页代码片段

    <div class="input input-file  ">
         <span class="button"><input on-read-file="readFileContent($fileContent)" 
    type="file" id="attachments" name="file" data-ng-model="attachments" 
    onchange="this.parentNode.nextSibling.value = this.value">Browse</span>
<input type="text" placeholder="Attach some files" readonly="">
 </div>

读取输入文件的自定义指令

var mimeType,fileName;
testModule.directive('onReadFile', function ($parse) {
    return {
        restrict: 'A',
        scope: false,
        link: function(scope, element, attrs) {
            var fn = $parse(attrs.onReadFile);
            element.on('change', function(onChangeEvent) {
                var reader = new FileReader();
                reader.onload = function(onLoadEvent) {
                    scope.$apply(function() {
                        fn(scope, {$fileContent:onLoadEvent.target.result});
                    });
                };

                reader.readAsText((onChangeEvent.srcElement || onChangeEvent.target).files[0]);
                //Get the Uploaded file mime type 
                mimeType=(onChangeEvent.srcElement || onChangeEvent.target).files[0].type;
                fileName=(onChangeEvent.srcElement || onChangeEvent.target).files[0].name;
            });
        }
    };
});

读取文件内容方法

 $scope.readFileContent = function($fileContent){
   $scope.content = $fileContent;
          };

我建议在StackOverflow上查看这篇文章:

以角度上传多个文件

答案之一包含以下工作示例:

http://plnkr.co/edit/B13t84j5IPzINMh1F862?p=preview

它使用一个名为 ng-file-model 的指令:

<input type="file" ng-file-model="files" multiple />