上传多个文件,显示属性说文件大小,文件名,还删除选项和取消等

时间:2017-06-05 07:27:30

标签: angularjs

我遇到了这个要求,我需要上传多个文件,并显示其他属性,如显示文件名,文件大小以及当有人点击删除选项时,也应删除特定文件。

我想发布这个问题作为其他人的参考,仅仅是出于帮助某人的目的

1 个答案:

答案 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;
                }
            });