Javascript 上传多个angularjs

我可以上载一个文件，但不能使用

多个

。我怎么做

这就是我迄今为止所尝试的：

var myApp=angular.module（'myApp'，[]）

html：

<div ng-controller = "myCtrl">
    <form>
        <input type="file" multiple file-model="myFile"/>
        <button ng-click="uploadFile()">upload me</button>
    </form>

    {{myFile.name}}
</div>

上传我
{{myFile.name}

---

这里的jsfiddle:

将处理所有文件并将它们设置到模型中

myApp.directive('fileModel', ['$parse', function ($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(){
                    for(int i=0; i<element[0].files.length; i++)
                    {
                       modelSetter(scope, element[0].files[i]);
                    }
                    for(int i=0; i<element[0].files.length; i++)
                    {
                       console.log(element[0].files[i]);
                    }
                });
            });
        }
    };
}]);
//If api does not take an array of files
myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){

    $scope.uploadFile = function(){
        var file = $scope.myFile;
        console.log('file is ' + JSON.stringify(file.name));

        var uploadUrl = "http://httpbin.org/post";
        for(int i=0; i<file.length; i++)
       {
        fileUpload.uploadFileToUrl(file[i], uploadUrl,function(data, status, headers, config){
            if(status == 200)console.log('Success!');
            else console.log('Error!');
        });
       }
    };

}]);

myApp.directive（'fileModel'，['$parse'，function（$parse）{
返回{
限制：“A”，
链接：函数（范围、元素、属性）{
var model=$parse（attrs.fileModel）；
var modelSetter=model.assign；
元素绑定（'change'，function（））{
作用域$apply（函数（）{
对于（inti=0；i，您的代码有两个与您的意图相反的问题

，但会突出问题所在

使用指令中的for循环，您将删除除最后选定的文件以外的所有文件。您根本不应该使用for循环，它们在那里没有任何意义！只需传入文件数组即可

element.bind('change', function () {
    scope.$apply(function () {
        modelSetter(scope, element[0].files);
    });
});


实际的上载函数只处理单个文件，而它应该需要一个数组并上载所有项目

$scope.uploadFile = function () {
    var files = $scope.myFile,
        uploadUrl = "http://httpbin.org/post";

    function callback(data, status, headers, config) {
        if (status == 200) console.log('Success!');
        else console.log('Error!');
    }

    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        console.log('file is ' + JSON.stringify(file.name));
        fileUpload.uploadFileToUrl(file, uploadUrl, callback);
    }
};

$scope.uploadFile=函数（）{
var files=$scope.myFile，
上传URL=”http://httpbin.org/post";
函数回调（数据、状态、标题、配置）{
if（status==200）console.log（'Success！'）；
else console.log（'Error！'）；
}
对于（var i=0；i

或者，如果要在一个请求中上载所有文件，可以修改
uploadfiletour
将每个文件添加到FormData

你为什么不使用或？很好的建议，但我需要使用这种方式。你能帮我吗？我可以选择两个文件，我不能确定它们是否正确上载。它只显示一个文件名，因为myFile.name是多个文件中的最后一个。@cabey77你能告诉我怎么做吗？@End.Game你尝试传递文件数组了吗？什么都没有else？何时必须附加formData？取决于api是否处理文件数组。如果不是，则必须循环遍历var文件并调用fileUpload.uploadToUrl（）每次你都可以尝试使用JSFIDLE吗？我以你的方式尝试过，但不起作用。请求不再启动。我的解决方案与vzsg相同，只是他的写得更好。你必须查看api，看看它作为post数据需要什么。好吧，这并不是真的错，但这样它会发出两次请求。每个文件一个。I n需要对所有文件只执行一次请求。服务fileUpload不需要修改吗？
$scope.uploadFile = function () {
    var files = $scope.myFile,
        uploadUrl = "http://httpbin.org/post";

    function callback(data, status, headers, config) {
        if (status == 200) console.log('Success!');
        else console.log('Error!');
    }

    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        console.log('file is ' + JSON.stringify(file.name));
        fileUpload.uploadFileToUrl(file, uploadUrl, callback);
    }
};