Загрузка нескольких файлов с помощью angularjs

Я хочу загрузить несколько файлов с помощью угловых js, но это похоже на ограниченное количество файлов и каждый со специальной проверкой, поэтому can not использовать «multiple». Использование нескольких элементов управления по одному для каждого файла ..Загрузка нескольких файлов с помощью angularjs

ниже пример кода

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

app.controller('MainCtrl', function($scope) { 
    $scope.filelist = ['file1','file2'] 

}); 

app.directive("fileBind", function() { 
    return function(scope, elm, attrs) { 
    elm.bind("change", function(evt) { 
     scope.$apply(function() { 
     scope[ attrs.fileBind ] = evt.target.files; 
     }); 
    }); 
    }; 
});

corrposponding HTML является:

<div ng-controller="MainCtrl"> 

     <div ng-repeat="myfile in filelist"> 
     <input type="file" file-bind="files" /> 
     </div> 

     <div ng-repeat="file in files"> 
     <pre>{{ file | json }}</pre> 
     </div> 

    </div>

Я также сделал plunker для него: http://plnkr.co/edit/DF2WYU

но это не работает ... если я использую $ index или что-нибудь, чтобы сохранить все загруженные файлы, директива перестает работать ...

любая помощь appriciated

источник

2013-06-11 Mahen

И ваш вопрос? – hakre

Извините, не слишком явственно о вопросе – Mahen

не знаете, где проблема, но я поставил вместе простой/легкий угловую директиву с polyfill для браузеров, не поддерживающих HTML5 FormData здесь:

https://github.com/danialfarid/angular-file-upload

Это очень похоже на то, что вы делаете здесь, с помощью директивы, которая прослушивает событие изменения. Затем вы можете вызвать добавленный прототип в $ http "uploadFile", чтобы загрузить этот файл на сервер через ajax. Для IE он загрузил бы флеш-файл, чтобы имитировать то же самое.

Здесь работает демо: http://angular-file-upload.appspot.com/

<script src="angular.min.js"></script> 
<script src="angular-file-upload.js"></script> 

<div ng-controller="MyCtrl"> 
    <input type="text" ng-model="myModelObj"> 
    <input type="file" ng-file-select="onFileSelect($files)" > 
</div>

контроллер:

$http.uploadFile({ 
    url: 'my/upload/url', 
    data: {myObj: $scope.myModelObj}, 
    file: $file 
    }).then(function(data, status, headers, config) { 
    // file is uploaded successfully 
    console.log(data); 
    });

источник

2013-09-03 18:43:30 danial

Загружает ли ваш код все файлы в одном запросе на сервер? – AlexandruC

Для браузеров HTML5 да вы можете загружать кучу файлов по одному запросу, но для IE8-9 это нужно делать по одной причине из-за ограничений флэш-памяти. С точки зрения дизайна лучше, чтобы загрузка выполнялась отдельно и по отдельности, возможно, как только пользователь выбирает файлы, так как это потенциально медленный процесс. Как только это будет сделано, вы можете использовать загруженный идентификатор, чтобы найти загруженный файл на сервере. https://github.com/danialfarid/angular-file-upload/issues/1#issuecomment-22462440 – danial

Я не уверен, о своем намерении глядя код (извините не так много времени ...) в любом случае один тег HTML ввода-файл может содержать список файлов, см https://developer.mozilla.org/en-US/docs/Web/API/FileList

Учитывая, что вы можете попробовать с this answer добавляя больше файлов в FormData

источник

2013-07-06 16:40:07

Загрузка нескольких файлов с помощью angularjs

ответ

Смежные вопросы