Как добавить несколько файлов в AngularJS? - PullRequest
0 голосов
/ 04 июля 2018

Как добавить несколько файлов в угловых 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 голосов
/ 04 июля 2018

Мне кажется нормальным, что он не работает на нескольких файлах. Вы сохраняете ваш файл по индексу 0 вашей таблицы, я бы сделал что-то вроде:

$ scope.theFile = data;
let newArray = element.push (data);
0 голосов
/ 04 июля 2018

Отдай 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]);
                }
            });
        });
    }
};
}]);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...