Javascript 读取多个文件输入

这是我用来读取文件输入中的第一项的代码，我如何迭代该输入中的所有项

function readFile (uploadControlId) {
    if (!window.FileReader)
        throw "The browser does not support HTML 5";

    var element = document.getElementById(uploadControlId);

    var def = new $.Deferred();

    var file = element.files[0];
    var parts = element.value.split("\\");
    var fileName = parts[parts.length - 1];

    var reader = new FileReader();
    reader.onload = function (e) {
        if (uploadControlId == 'uploadControlId'){
            def.resolve(e.target.result, fileName);
        } else {
            def.resolve(e.target.result, fileName);
        }

    };
    reader.onerror = function (e) {
        def.reject(e.target.error);
    };

    reader.readAsArrayBuffer(file);
    return def.promise();
}

我试过这样的方法：

angular.forEach(element.files, function (file){
})

但是这不起作用，因为变量'parts'和'fileName'来自变量'element'，所以如果我迭代元素中的每个文件，它们会得到'undefined'文件名，这意味着它们不会像.txt或.pdf那样，所以它们是不可读的

更新：这不会给出错误，但只上载最后一个文件：

    function readFile (uploadControlId) {
    if (!window.FileReader)
        throw "The browser does not support HTML 5";

    var def = new $.Deferred();

    var element = document.getElementById(uploadControlId);

    angular.forEach(element.files, function(file){

        var fileName = file.name;

        var reader = new FileReader();
        reader.onload = function (e) {
            def.resolve(e.target.result, fileName);
        };
        reader.onerror = function (e) {
            def.reject(e.target.error);
        };

        reader.readAsArrayBuffer(file);
    });
    return def.promise();
}

我的上传功能：

$scope.UploadAttachment = function(){
    readFile(uploadControlId).done(function (buffer, fileName) {

// logic to upload to server

    }).fail(function (err) {
        alert("error in reading file content");
    });

};

您是否在输入标记上添加了“multiple”属性

顺便说一句，如果您将此指令添加到标记中，则所有文件都将触发一个事件，并且您将在控制器中处理该事件

// Directive
(function(){

    var Directive = function(){
        return {
            restrict: 'A',
            scope : {},
            link : function(scope, element, attrs){
                element.bind('change', function(changeEvent){
                    scope.$emit('fileReader', changeEvent.target.files);
                });
            }
        }
    };

    Directive.$inject = [];

    app.directive('fileReader', Directive);

})();

// Controller
(function(){

    var Controller = function($scope){

        // Methods
        function fileReader(files){

            for(var iFile = 0, fileLen = files.length; iFile < fileLen; iFile = iFile + 1){
                var file = files[iFile];
                // Do something
            }

        }

        // Events
        $scope.$on('fileReader', function(event, files){
            fileReader(files);
        });


    };

    Controller.$inject = [
        '$scope'
    ];

    app.controller('MainCtrl', Controller);

})();

//指令
（功能（）{
var指令=函数（）{
返回{
限制：“A”，
作用域：{}，
链接：函数（范围、元素、属性）{
元素绑定（'change'，函数（changeEvent）{
作用域$emit（'fileReader'，changevent.target.files）；
});
}
}
};
指令。$inject=[]；
应用指令（“文件阅读器”，指令）；
})();
//控制器
（功能（）{
变量控制器=函数（$scope）{
//方法
函数文件读取器（文件）{
对于（变量iFile=0，fileLen=files.length；iFile

对于（var i=0；i

是的，但是如何单独设置fileName属性？我需要“.txt”部分（或用户上传的任何内容）是的，我有“multiple”标记，我需要一些时间来处理这个答案（我是指令新手），但我会尝试它，以确保我删除了无用的$q依赖项。您可以在输入标签上添加“文件阅读器”作为属性，然后在上传后，您将在控制器中处理文件。