javascript - 读取多个文件输入

Question

这是我用于读取文件输入中第一项的代码，如何迭代此输入中的所有项目？

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”，所以如果我迭代 element 中的每个文件，它们会得到“未定义”fileName，这意味着它们不会例如 .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");
    });

};

Answer 1

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

顺便说一句，如果您将此指令添加到标记中，所有文件都会触发一个事件，您将在 Controller 中处理该事件。

// 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);

})();