如何确保FileReader使用Javascript完全读取文件

我在XML文件中定义了各种HTML元素。 我无法整体显示XML元素，但它有多行，每行由复选框、文件上载选项等组成

我使用Javascript获取这些元素，然后使用XMLHTTPRequest，将这些请求发送到控制器进行处理

设想HTML元素如下所示：

Row1 ----  Checkbox1_Row1   TextDescription_Row1     FileUpload_Row1    
Row2 ----  Checkbox1_Row2   TextDescription_Row2     FileUpload_Row2    

我可以有尽可能多的行

使用Javascript，我得到了所有这些表单元素，这些元素由行号Row1和Row2区分

我循环遍历每个表单元素，然后

for(var j=0; j< formelements.length; j+++)
{
  if (formElements[j].type == "textbox")
   {
        Do something
    }
    elseif (formElements[j].type == "file")
    {
        var Base64String;
        var ready = false;
        var fileName = formElements[j].files[0].name;

        var check = function () {
        if (ready === true) {               
         array.push(Base64String);                           
         return;
         }
         setTimeout(check, 1000);
         }

         check();

         var reader = new FileReader();
          reader.onloadend = function (evt) {
          Base64String = evt.target.result;
          ready = true;
          };
         reader.readAsDataURL(file);
        }
    }

我使用一个数组来推送与每行对应的所有值，经过一些修改后，带有最终值的数组将被发送到控制器。对于文件上传选项，我从每一行读取文件，并将其转换为二进制格式并发送到控制器。如果只有一行，这种方法可以很好地工作。当有多行时，这种方法的效果是，在表单元素中循环时，它会检查第一行的所有内容，比如textbox并将其放入数组中，但当它是文件类型时，它会进入循环并读取文件。在这里读取文件需要一段时间，时间循环会转到下一个表单元素，它只不过是第2行。现在Row2表单元素进入图片并说，我们不上传任何文件，它将为空。现在check函数完成，第1行的文件被完全读取。由于循环已经在for Row 2 form元素中，因此除了null值之外，此文件值将被分配给Row 2。因此，当涉及到文件类型时，第2行将同时具有null值和file值，但第1行没有值。类似地，如果在多行中有许多文件，则会根据FileReader读取的时间将文件值分配给当前循环中的任何一行表单元素

在转到下一个表单元素之前，我需要确保完全读取了文件值。如何做到这一点

************************更新**********************

这里提到的将我的标记为重复的问题只有文件类型，因此，他们可以循环遍历文件类型。对我来说，表单元素包括Checkbox1_行1、TextDescription_行1、FileUpload_行1、Checkbox1_行2、TextDescription_行2、FileUpload_行2

在转到下一个表单元素之前，我必须确保FileUpload_Row1具有从文件读取的正确值，这里是Checkbox1_Row2

evt应该是evt.target.result上的事件。将event.target.result推送到fileList数组，在fileList.length等于count时执行填充

函数myFunction{ var files=Array.prototype.map.call document.querySelectorAll[id^=myFile] ，函数输入{ 返回{id:input.dataset.id，文件：input.files[0]}； }; var count=files.length；//文件总数 var fileList=[]；//接受的文件 对于变量i=0；i=计数{ 打破 } var reader=新文件读取器； reader.onload=函数ID，文件名{ 返回函数事件{ push{id，filename，file:event.target.result}{ 如果fileList.length==计数{ //使用`文件列表'进行操作` console.logfileList； } } } }id，文件名； reader.readAsDataURLfile； } } 你好，普朗克！ 试试看

---

.push Base64String到onloadend回调中的数组。我已经尝试过了，但仍然面临相同的问题。能否创建stacksnippets或plnkr来演示这个问题？我刚刚提供了plnkr链接。它不起作用，但我已经提供了我在那里期待的东西。这里有3个文件输入，我必须确保我需要完全读取所有这3个输入文件，并将检查中的这3个值按相同顺序推送到数组文件列表中。示例：文件1包含一些jpg文件，文件2为null，文件3为pdf，那么数组应该包含jpg、null和pdf的值。对不起，plnkr不工作。谢谢。代码片段的一个特点是，当您尝试上载一个较大的文件时，例如第一个选项hello.pdf中的5MB，第二个check.txt和第三个上载选项image.jpg中的较小文件可能以KB为单位，第一个文件由于其大小较大，读取时间较长，但第二个和第三个文件所需时间较少。因此，首先打印第二个文件，然后打印第三个文件，最后打印第一个文件。这是我长期面临的问题。必须维持秩序。读取第一个文件需要多少时间，应该先完全读取，然后再读取第二个文件，再读取第三个文件。我尝试了一个示例，它的行为就是这样的。它甚至在co之前就进入下一个循环

---

当当前循环是大文件时，完成它。您对如何保持顺序有什么建议吗？FileReader加载事件异步返回结果。预期的订单是什么？用户选择文件的顺序？这是我长期面临的问题。必须维持秩序。原始问题中是否描述了该要求？我只是确保已根据您的建议更改了逻辑，关于我的问题，有多行，每行包括复选框、文本描述和文件上载选项，我必须确保稍后将文件链接到正确的行。使用这种方法，假设有3个文件，A、B和C。A文件的大小较大，B/C文件的大小较小。FileReader需要一些时间来读取文件，当它仍在读取时，它会移动到B和C文件并完成读取，因为它们的大小较小。现在它完成了第一个文件的读取，顺序是B->C->A，B文件链接到第1行，C文件链接到第2行，A文件链接到第3行。有时，如果它们需要相同的时间来完全读取，则C文件将链接到第2行，而一个文件也将链接到第2行。