Question

之情况....

我试图通过Javascript API将大量文件上传到AWS。虽然文件的数量可能很多（100 - 500），但我通过首先将文件信息发送到我的Web服务器（通过Ajax）来解析名称，大小等来管理这个...并将此信息插入到我的数据库中。然后，我将新创建的记录的ID返回到我的网页，并使用＆＃39; id＆＃39;将文件发送到S3。作为文件名。这样，我相信我正在创建独特的记录和文件名。

...问题

由于我的Ajax例程处于for循环中，因此上传到S3的文件也是如此。我无法通过此脚本向我提供有关上传进度的任何有价值的反馈（上传本身运行正常）。

以下任何一项都会让我开心......

包含总上传大小（所有文件）和报告的总进度的div。
正在上传的所有文件及其总计及其金额的列表。
报告＆＃34;加载的520个文件中的20个＆＃34;

我的代码......

var aj = $.ajax({
            url: 'handler.php',
            type: 'POST',
            data: { packnameid: packnameid,
                    number: number,
                    name: name
                },
            success: function(result) {
                     // Initialize the Amazon Cognito credentials provider
                AWS.config.region = 'us-east-1'; // Region
                AWS.config.credentials = new AWS.CognitoIdentityCredentials({
                IdentityPoolId: '********************',
                });

                var bucket = new AWS.S3({params: {Bucket: 'traseindex'}});
                var params = {Key: result+".pdf", ContentType: file.type, Body: file};

                bucket.upload(params).on('httpUploadProgress', function(evt) {
                document.getElementById('total').innerHTML = evt.total;
                document.getElementById('status').innerHTML = i +" of " + files.length + " " + parseInt((evt.loaded * 100) / evt.total)+'%'
                console.log("Uploaded :: " + parseInt((evt.loaded * 100) / evt.total)+'%');

                }).send(function(err, data) {
                  document.getElementById('total').innerHTML = i +" of "+ files.length + " complete";
                });
            }
        });

无论我如何更新httpUploadProgress片段，我都无法实现目标。对于instane，"i of file.length"会立即报告所有文件都已完成，但是parseint评估会继续向我显示上传过程中每个文件的完成百分比。

我尝试使用循环迭代的id创建多个div＆＃34; i＆＃34;然后使用parseint评估附加每个div，但百分比仅显示在最后创建的div中。

如果有人可以指出我正确的方向，如何处理这个问题，我会接受它。

感谢。

AWS Javascript上传多个文件并报告进度

0 个答案: