Angularjs загрузка нескольких файлов - PullRequest
Новая
       9

Angularjs загрузка нескольких файлов

0 голосов
/ 07 января 2020

Наша команда развивается в ServiceNow и нуждается в возможности загружать документы и прикреплять их к истории болезни. Посмотрев несколько примеров, у нас есть рабочий пример. Наш HTML выглядит следующим образом: 

<input type="file" file-model="myFile"/>
<button ng-click="uploadFile()">upload me</button>

В нашем контроллере у нас есть следующее: 

$scope.uploadFile = function(){
        var file = $scope.myFile;
        console.log('file is ' );
        console.dir(file);
        var uploadUrl = "/fileUpload";
        fileUpload.uploadFileToUrl(file, uploadUrl);
    };

Мы также создали зависимость с именем fileUpload: 

var myApp = angular.module('myApp', []);

myApp.service('fileUpload', ['$http', function ($http) {
    this.uploadFileToUrl = function(file, uploadUrl){
        var fd = new FormData();
        fd.append('file', file);
        $http.post(uploadUrl, fd, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        })
            .success(function(){
        })
            .error(function(){
        });
    };
}]);

Наконец, у нас есть angular провайдер с именем fileModel: 

function fileModel($parse) {
    return { 
        restrict: 'A', 
        link: function(scope, element, attrs) {
            var model = $parse(attrs.fileModel); 
            var modelSetter = model.assign;
            element.bind('change', function(){ 
                scope.$apply(function(){
                  modelSetter(scope, element[0].files[0]);
                }); 
            }); 
        } 
    }; 
}

Есть ли способ изменить это так, чтобы мы могли загружать несколько файлов вместо одного? Мы добавили «несколько» в HTML, но в нашей консоли отображается только 1 файл. Я думаю, что мы упускаем что-то довольно очевидное, но не можем понять это ...

Ответы [ 2 ]

0 голосов
/ 07 января 2020

Вы добавили multiple="true" В ваш Html?

0 голосов
/ 07 января 2020

Попробуйте этот код и проверьте консоль. 

<body ng-app="fileUpload" ng-controller="MyCtrl">
<input type="file" multiple="true" id="fileUpload" file="file"/>
<button ng-click="uploadFile()">upload me</button>
</body>

//inject angular file upload directives and services.
var app = angular.module('fileUpload', ['ngFileUpload']);

app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) {
     $scope.uploadFile = function () {

        var fd = new FormData();
        angular.forEach($scope.file, function (value, key) {
            fd.append(key, value);
        });

         for (var pair of fd.entries()) {
            console.log(pair[0]+ ', ' + pair[1]); 
        }
        console.log("hi")
    };
}]);

app.directive('file', function () {
    return {
        scope: {
            file: '='
        },
        link: function (scope, el, attrs) {
            el.bind('change', function (event) {
                var file = event.target.files;
                scope.file = file ? file : undefined;
                scope.$apply();
            });
        }
    };
})

Codepen - https://jsfiddle.net/PratikPatel227/0rehq8g4/1/ (другое)

...