如何在AngularJS中添加多个文件?

时间:2018-07-04 09:32:27

标签: angularjs

如何在angular js中添加多个文件?当我尝试上传一个文件时,它正在工作。但是对于多个文件,它不起作用。此代码需要进行哪些更改?

js:

var xUrl
    $scope.setFile = function(element) {
            $scope.$apply(function($scope) {
                $scope.theFile = element.files[0];
                console.log("file:"+$scope.theFile.name)
xUrl=$scope.theFile.name

            });
        };

html:

<div class="form-group">
    <input type="file" onchange="angular.element(this).scope().setFile(this)">
 hai:  {{theFile.name}}
            </div>

2 个答案:

答案 0 :(得分:0)

像html一样给予

<input type="file" ng-file-model="files" multiple />
<p ng-repeat="file in files">
  {{file.name}}
</p>

和js:

 $scope.files=[];
app.directive('ngFileModel', ['$parse', function ($parse) {
return {
    restrict: 'A',
    link: function (scope, element, attrs) {
        var model = $parse(attrs.ngFileModel);
        var isMultiple = attrs.multiple;
        var modelSetter = model.assign;
        element.bind('change', function () {
            var values = [];
            angular.forEach(element[0].files, function (item) {
                var value = {
                   // File Name 
                    name: item.name,
                    //File Size 
                    size: item.size,
                    //File URL to view 
                    url: URL.createObjectURL(item),
                    // File Input Value 
                    _file: item
                };
                values.push(value);
            });
            scope.$apply(function () {
                if (isMultiple) {
                    modelSetter(scope, values);
                } else {
                    modelSetter(scope, values[0]);
                }
            });
        });
    }
};
}]);

答案 1 :(得分:0)

在我看来,正常情况下,它不适用于多个文件。 您将文件保存在表的索引0上,我将执行以下操作:

$ scope.theFile = data;
let newArray = element.push (data);