[英]How to add multiple files into a array and access files one by one in AngularJs
我试图将多个文件添加到文件数组中,然后在访问AngularJs.So中的每个文件时,我已经创建了一个自定义指令来读取文件,查看一些posts.it工作正常,只有一个文件。但我的要求是我想上传多个文件并将它们添加到数组中,然后在访问数据时访问创建的文件数组。我是AngularJs的新手,请帮助我实现这一目标。
HTML代码段
<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 />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.