使用 JavaScript 读取多个文件并等待结果答案

【问题标题】：Read Multiple Files With JavaScript and Wait for Result使用 JavaScript 读取多个文件并等待结果
【发布时间】：2018-11-02 07:10:46
【问题描述】：

首先我想说的是（来自 c++ 和 python）我对 JS 完全陌生，所以我欢迎任何关于我的代码的明智建议。

我希望使用 HTML5 文件 API 读取一些文件，然后用 JS 打开它们，执行一些操作并下载压缩后的结果。我的问题是读取文件似乎是一个异步操作，我并没有真正看到一种优雅的方式来等待它们全部完成然后压缩结果。

这里介绍了一种可能的解决方案： https://stackoverflow.com/a/17491515 但我想知道是否可以比使用全局标志做得更好。

我在从异步函数中检索结果时也遇到了问题，因为我不知道如何在 changeCharsInFiles 中取回 new_file_list。

谢谢！

代码示例： HTML：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    </head>
    <body >
        <div class="container">
            <div class="jumbotron">
                <h3>Add Files Here</h3>
                <input type="file" id="the-file-field" multiple>
            </div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
        <script src="http://cdn.jsdelivr.net/g/filesaver.js"></script>
        <script>
         ########### SEE JS BELOW #####################
    </script>
</body>

JS：

if (window.File && window.FileReader && window.FileList && window.Blob) {

                //functions
                function zipMyFilesAndSave(file_list){

                    var zip = new JSZip();
                    for (var i = 0; i<file_list.length; i+=1)
                    {
                        zip.file(file_list[i].name, file_list[i]  );
                    }
                    zip.generateAsync({type:"blob"}).then(
                    function (blob) {                                      
                        saveAs(blob, "hello.zip");                         
                    }, 
                    function (err) {
                        jQuery("#blob").text(err);
                    }); 
                }

                function changeCharsInFiles(file_list){
                    var new_file_list = [];

                    for (var i = 0; i<file_list.length; i+=1)
                    {
                        var file = file_list[i]

                        var reader = new FileReader();
                        reader.onload = function() {
                            //alert(reader.result);
                            var txt  = reader.result;
                            console.log("txt: ",txt)

                            var new_txt = ""
                            var allTextLines = txt.split(/\r\n|\n/);

                            for (var j = 0; j<allTextLines.length; j+=1)
                            {
                                var res = allTextLines[j].replace("a", "A");
                                res = res.replace("b", "B");
                                res = res.replace("c", "C");
                                res = res.replace("d", "D");

                                new_txt += res + "\n"

                            }
                            console.log("new_txt: ", new_txt)
                            var new_file = new Blob([new_txt], {type: "text/plain"});

                            new_file_list.push(new_file); //<---------------------------how do I get this back?
                        }
                        reader.readAsText(file);    

                    }


                    return new_file_list;
                }

                //watcher
                $( "#the-file-field" ).change(function() {
                    console.log("files have been chosen")
                    var file_list = this.files
                    file_list = changeCharsInFiles(file_list)
                    zipMyFilesAndSave(file_list)    
                });


            } else {
                alert('The File APIs are not fully supported in this browser.');
            }

【问题讨论】：

您可以使用callback。 function longTaking() {setTimeout({callYourFunction},1000)。 setTimeout() 只是演示文件读取的示例。

标签： javascript html filereader

【解决方案1】：

尝试阅读 Promise 类，它的开发目的是使异步操作更容易：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

在你的情况下，你可以这样使用它：

function changeCharsInFiles(file_list){
    let promises = [];
    for (let file of file_list) {
        let filePromise = new Promise(resolve => {
            let reader = new FileReader();
            reader.readAsText(file);
            reader.onload = () => resolve(reader.result);
        });
        promises.push(filePromise);
    }
    Promise.all(promises).then(fileContents => {
        // fileContents will be an array containing
        // the contents of the files, perform the
        // character replacements and other transformations
        // here as needed
    });
}

这只是解决方案的大致轮廓。我建议你先用 Promises 做一些实验（这可能是一个相当深奥的话题）来弄清楚基本原理，然后再应用上面类似的东西。

【讨论】：

谢谢，这工作得很好。我想我不能返回结果并且必须在.then(fileContents => {}) 部分中使用它们，对吗？这个异步的东西还是很奇怪的。
正确。我同意异步需要一些时间来适应。这是 JavaScript 确保操作不会阻塞的方式，无需使用实际的多线程。之前给另外一个用户写过回复：stackoverflow.com/questions/49954440/…——MDN也有更详细的文章：developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop