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

Question

I have various HTML elements defined in an XML file. 我在XML文件中定义了各种HTML元素。 I cant be able to display my XML element as whole but it has multiple rows and each row consists of checkboxes, File upload option, etc. 我无法整体显示XML元素，但它具有多行，每行包含复选框，文件上载选项等。

I am using Javascript to get these elements and then using XMLHTTPRequest, sending these requests to the controller to process. 我使用Javascript获取这些元素，然后使用XMLHTTPRequest，将这些请求发送到控制器进行处理。

Imagine HTML elements be like below: 想象一下HTML元素如下所示：

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

I can have how many ever rows as possible. 我可以有尽可能多的行。

Using Javascript, I am getting all these form elements and these elements are differentiated by Row number (Row1, Row2). 使用Javascript，我得到了所有这些表单元素，并且这些元素通过行号（行1，行2）进行区分。

I am looping through each form elements and then 我在遍历每个表单元素，然后

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

I am using an array to push all the values corresponding to each row and the array with final value will be sent to the controller after some alterations. 我正在使用一个数组来推送与每一行相对应的所有值，并且经过一些更改后，具有最终值的数组将被发送到控制器。 Here for file upload option, I am reading the file from each row and converting them into binary format and sending to the controller. 在这里，对于文件上传选项，我从每一行读取文件，并将它们转换为二进制格式，然后发送给控制器。 This approach works fine, if there is only one row. 如果只有一行，则此方法效果很好。 What happens with this approach when there are multiple rows is, while looping through the form element, it check everything for the first row (say textbox) and puts into the array but when it is file type, it goes to the loop and reads the file. 当有多行时，这种方法会发生以下情况：在循环通过form元素时，它检查第一行（例如文本框）的所有内容，并将其放入数组中，但是当它是文件类型时，它将进入循环并读取文件。 Reading the file takes sometime here and by the time loop goes to the next form element (which is nothing but Row2). 在这里读取文件需要花费一些时间，到时间循环，将转到下一个表单元素（除了Row2之外什么都没有）。 Now Row2 form element comes into picture and say, we do not upload any file, it will be null. 现在Row2表单元素出现了，并说，我们不上传任何文件，它将为null。 Now check() function gets completed and file from row1 is read completely. 现在，check（）函数已完成，并且已完全读取了row1中的文件。 Since the loop is already in for Row 2 form element, this file value is getting assigned to Row2 apart from null values. 由于行2表单元素已经存在循环，因此该文件值除空值外还将分配给行2。 So Row2 will have both null value and file value when it comes to file type but there is no value for Row1. 因此，对于文件类型，Row2将同时具有空值和文件值，但Row1没有值。 Similarly if I have many files in multiple rows, the file value gets assigned to which ever row form element that is there in current loop based on the time read by FileReader. 类似地，如果我在多行中有许多文件，则根据FileReader读取的时间，将文件值分配给当前循环中存在的行形式元素。

I need to make sure that file value is read completely before moving on to the next form element. 在进入下一个表单元素之前，我需要确保已完全读取文件值。 How to achieve this? 如何实现呢？

************************Updates********************** ************************更新**********************

The question which was referred here marking mine as duplicate has only file type coming in and hence, they can loop through the file type. 这里提到的将我的标记为重复的问题仅包含文件类型，因此它们可以遍历文件类型。 For me, form elements consists of Checkbox1_Row1, TextDescription_Row1, FileUpload_Row1, Checkbox1_Row2 , TextDescription_Row2, FileUpload_Row2. 对我来说，表单元素由Checkbox1_Row1，TextDescription_Row1，FileUpload_Row1，Checkbox1_Row2，TextDescription_Row2，FileUpload_Row2组成。

I have to make sure that FileUpload_Row1 has right value read from the file before moving on to to next form element, here Checkbox1_Row2. 我必须确保在移至下一个表单元素（此处为Checkbox1_Row2）之前，从文件中读取FileUpload_Row1的正确值。

Answer 1

evt should be event at evt.target.result . evt应该是在evt.target.result上的event 。 .push() event.target.result to fileList array, do stuff when fileList .length is equal to count .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 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