我遇到了这个要求,我需要上传多个文件,并显示其他属性,如显示文件名,文件大小以及当有人点击删除选项时,也应删除特定文件。
我想发布这个问题作为其他人的参考,仅仅是出于帮助某人的目的
答案 0 :(得分:0)
要实现这一目标,请按以下方式进行
var app=angular.module("MyApp",[]);
app.directive('fileUpload', function () {
return {
scope: true, //create a new scope
link: function (scope, el, attrs) {
el.bind('change', function (event) {
var files = event.target.files;
//iterate files since 'multiple' may be specified on the element
for (var i = 0;i<files.length;i++) {
//emit event upward
scope.$emit("fileSelected", { file: files[i] });
}
});
}
};
});
app.controller("MyCtrl",function($scope, $http) {
//a simple model to bind to and send to the server
$scope.model = {
name: "",
comments: ""
};
//an array of files selected
$scope.files = [];
//listen for the file selected event
$scope.$on("fileSelected", function (event, args) {
$scope.$apply(function () {
//add the file object to the scope's files collection
$scope.files.push(args.file);
});
});
$scope.remove=function(file,files){
console.log("size: "+($scope.files).length);
if(files.indexOf(file)!=-1){
files.splice(files.indexOf(file),1);
}
}
$scope.validate=function(size,file,files){
var status=false;
console.log("size @@: "+($scope.files).length);
if(size >2048){
if(files.indexOf(file)!=-1){
files.splice(files.indexOf(file),1);
return true;
}
}
if(files.length>5){
if(files.indexOf(file)!=-1){
files.splice(files.indexOf(file),1);
return false;
}
}
}
$scope.cancel=function(files){
console.log("Cancelled");
files.length=0;
}
});