如何确保FileReader使用Java脚本完全读取文件

Question

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

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

想象一下HTML元素如下所示：

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

我可以有尽可能多的行。

使用Javascript，我得到了所有这些表单元素，并且这些元素通过行号（行1，行2）进行区分。

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

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);
        }
    }

我正在使用一个数组来推送与每一行相对应的所有值，并且经过一些更改后，具有最终值的数组将被发送到控制器。 在这里，对于文件上传选项，我从每一行读取文件，并将它们转换为二进制格式，然后发送给控制器。 如果只有一行，则此方法效果很好。 当有多行时，这种方法会发生以下情况：在循环通过form元素时，它检查第一行（例如文本框）的所有内容，并将其放入数组中，但是当它是文件类型时，它将进入循环并读取文件。 在这里读取文件需要花费一些时间，到时间循环，将转到下一个表单元素（除了Row2之外什么都没有）。 现在Row2表单元素出现了，并说，我们不上传任何文件，它将为null。 现在，check（）函数已完成，并且已完全读取了row1中的文件。 由于行2表单元素已经存在循环，因此该文件值除空值外还将分配给行2。 因此，对于文件类型，Row2将同时具有空值和文件值，但Row1没有值。 类似地，如果我在多行中有许多文件，则根据FileReader读取的时间，将文件值分配给当前循环中存在的行形式元素。

在进入下一个表单元素之前，我需要确保已完全读取文件值。 如何实现呢？

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

这里提到的将我的标记为重复的问题仅包含文件类型，因此它们可以遍历文件类型。 对我来说，表单元素由Checkbox1_Row1，TextDescription_Row1，FileUpload_Row1，Checkbox1_Row2，TextDescription_Row2，FileUpload_Row2组成。

我必须确保在移至下一个表单元素（此处为Checkbox1_Row2）之前，从文件中读取FileUpload_Row1的正确值。

Answer 1

evt应该是在evt.target.result上的event 。 .push() event.target.result到fileList数组，当fileList .length等于count

 <!DOCTYPE html> <html> <head> <script> function myFunction() { var files = Array.prototype.map.call( document.querySelectorAll("[id^=myFile]") , function(input) { return {id:input.dataset.id, file: input.files[0]}; }); var count = files.length; // total number of files var fileList = []; // accepted files for (var i = 0; i < count; i++) { var file = files[i].file; var id = files[i].id; var filename = files[i].file.name; if (i >= count) { break; } var reader = new FileReader(); reader.onload = (function(id, filename) { return function(event) { fileList.push({id, filename, file:event.target.result}); { if (fileList.length === count) { // do stuff with `fileList` console.log(fileList); } } } })(id, filename); reader.readAsDataURL(file); } } </script> </head> <body> <h1>Hello Plunker!</h1> <input type="file" id="myFile_row1" data-id="A"> <input type="file" id="myFile_row2" data-id="B"> <input type="file" id="myFile_row3" data-id="C"> <button onclick="myFunction()">Try it</button> </body> </html>

plnkr http://plnkr.co/edit/VCGPPbWcock0PgC9wMWi?p=preview

如何确保FileReader使用Java脚本完全读取文件

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-05-16 05:33:33

如何确保FileReader使用Java脚本完全读取文件

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-05-16 05:33:33

解决方案1
1 已采纳 2017-05-16 05:33:33