读取多个文件输入

read multiple file inputs

本文关键字：输入文件读取更新时间：2023-09-26

这是我读取文件输入中的第一个项目的代码，我如何遍历这个输入中的所有项目?

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中的每个文件，它们会得到'undefined' 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");
    });
};

您是否在输入标签上添加了"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);
})();