如何使用FileReader的异步特性实现进度条和回调 [英] How to implement Progress Bar and Callbacks with async nature of the FileReader

问题描述

我在for循环中调用了FileReader API来迭代多个文件对象。我正在使用FileReader来显示图像的预览。

I have the FileReader API called within a for loop to iterate through multiple file objects. I'm using FileReader to essentially display preview of images.

function() {
    for (var i in Files) {
        var fileReader = new FileReader();
        fileReader.readAsBinaryString(Files[i]);
        fileReader.onload = function() {

            // do something on FileReader onload

        }

        fileReader.onprogress = function(data) {
            if (data.lengthComputable) {                                            
                var progress = parseInt( ((data.loaded / data.total) * 100), 10 );
                console.log(progress);
            }
        }
    }

    // do something on completion of FileReader process
    // actions here run before completion of FileReader
}

由于FileReader API的异步特性，我遇到了两个问题。首先，为每个FileReader实例触发 onprogress 事件。这为我提供了每个文件的进度。然而，我打算显示所有文件的总进度而不是单个文件。

I'm bumping into two issues due to the async nature of the FileReader API. First, the onprogress event fires for each FileReader instance. This gives me progress for each file. Whereas, I intend to display the total progress for all files instead of individual files.

其次，我想执行只应在所有实例（一个用于实例）时执行的操作FileReader的每个文件）都已完成。目前，由于FileReader异步运行，因此操作在FileReader完成任务之前运行。我已经搜索了很多，但却遇到了解决这些问题的方法。任何帮助都表示赞赏。

Secondly, I want to perform actions that should only be performed when all instances (one for each file) of the FileReader have completed. Currently, since FileReader is functioning asynchronously, the actions run before FileReader completes it's task. I have searched a lot and yet to come across a solution for these problems. Any help is appreciated.

推荐答案

让我们先解决您的第二个问题。您需要在单独的函数中定义完成后的代码，并在所有文件上传后调用该函数：

Let's address your second problem first. You need to define your after-completion code in a separate function, and call that function once all the files have uploaded:

function() {
    var total = Files.length; loaded = 0;
    for (var i in Files) {
        var fileReader = new FileReader();
        fileReader.readAsBinaryString(Files[i]);
        fileReader.onload = function() {

            // do something on FileReader onload
            loaded++;

            if (loaded == total){
                onAllFilesLoaded();
            }
        }

        fileReader.onprogress = function(data) {
            if (data.lengthComputable) {                                            
                var progress = parseInt( ((data.loaded / data.total) * 100), 10 );
                console.log(progress);
            }
        }
    }
}

function onAllFilesLoaded(){
    //do stuff with files
}

现在，为了跟踪进度，有几种不同的方法可以解决这个问题。现在您一次加载所有文件，每个文件都报告自己的进度。如果您不介意不常用的进度更新，则可以使用onload处理程序在每次上载文件时报告进度。如果你想要真正细粒度，准确的进度更新，你将不得不计算所有文件的总大小，然后跟踪每个文件的加载量，并使用每个加载的文件的总和文件与报告进度的所有文件的总大小进行比较。

Now, for tracking progress, there are a couple different ways you could address that. Right now you are loading all the files at once, and each file is reporting its own progress. If you don't mind less frequent progress updates, you could simply use the onload handler to report progress each time a file has uploaded. If you want really fine-grained, accurate progress updates, you are going to have to calculate the total size of all the files combined, then keep track of how much of each file has loaded, and use the sum of what has loaded for each file compared to the total size of all files to report progress.

或者，假设您使用进度条而不是console.log实现此操作，则可以提供为每个正在上载的文件分隔进度条，并按照您现在的操作完全计算每个文件的进度，然后更新相应的进度条。如果有任何需要澄清，请告诉我。

Alternatively, assuming that you are implementing this with a progress bar rather than console.log, you could provide a separate progress bar for each file that's being uploaded, and calculate progress for each file exactly as you're doing it now, then updating the corresponding progress bar. Let me know if any of that needs clarification.

这篇关于如何使用FileReader的异步特性实现进度条和回调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！