Чтение нескольких файлов из тега ввода с использованием JS

Question

У меня есть веб-страница, которая содержит HTML как,

<form action="/action_page.php">
     Select a Text File: <input type="file" onchange='ReadFile(this)'>
</form>

<input type="button" value ="Click" onclick="Execute();"/>

Теперь код JS:

var data = {};

function ReadFile(that) {
    if (that.files && that.files[0]) {
         var reader = new FileReader();
         reader.onload = function (e) {
             var out = e.targe.result;
              data = ParseAsMAP(out);
          };
          reader.readAsText(that.files[0]);
      }  
}

function Execute () {
   var models = data;

    $.ajax ({
            type : "POST",
            url : "myURLHere.svc/MyFunction"
            data : JSON.stringify({ModelsParam: Models}),
            contentType : "application/json",
            success : ServiceSuccess,
            error : ServiceFailed
            });
}

function ParseAsMAP(data) {
    //This function creates a map as shown below.
    // map["elem-1"] = "Nuble"
    // map["elem-2"] = "Flex"
    // map["elem-3"] = "Ricko"
    // map["elem-4"] = "Musk"
    // map["elem-5"] = "Nappy"
}

Приведенный выше код работает, как и ожидалось. Исходя из пользовательского выбора txt-файла, он получит содержимое файла и преобразует его в сопоставление с парами ключ-значение и сохранит его в переменной с именем data . Позже это вызывается в функции Execute для передачи в функцию веб-службы.

Чего я хочу достичь сейчас?

<form action="/action_page.php">
    Select a Text File: <input type="file" onchange='ReadFile(this)' multiple>
</form>

<input type="button" value ="Click" onclick="Execute();"/>

Я хочу, чтобы пользователь мог выбрать несколько txt-файлов на входе, а затем функция ReadFile должна прочитать каждый из этих txt-файлов и создать соответствующую карту этого и сохранить его где-нибудь, думаю, возможно, в массиве карты или что-то типа того. Таким образом, когда пользователь нажимает кнопку click , каждый из элементов массива карты может быть прочитан и затем передан как JSON в веб-службу.

Есть идеи, как этого достичь? Я в основном борюсь с частью, где все выбранные текстовые файлы преобразуются в карту и затем сохраняются в ней, чтобы к ней можно было обращаться позже, когда пользователь нажимает кнопку click .

UPDATE:

Я попробовал ниже, но это не работает. В основном в функции «Выполнить» переменная dataEx становится пустой.

var data = {};
var dataEx = {};
var totalFiles = 0;

    function ReadFile(that) {

       for (var i = 0; i < that.files.length; i++) {

        if (that.files && that.files[i]) {
             var reader = new FileReader();
             reader.onload = function (e) {
                 var out = e.targe.result;
                  data = ParseAsMAP(out);
                  dataEx[i] = data;
                  totalFiles++;
              };
              reader.readAsText(that.files[i]);
          }  
       }
    }

    function Execute () {

    for (var i = 0; i < totalFiles; i++) {
       var models = dataEx[i];

        $.ajax ({
                type : "POST",
                url : "myURLHere.svc/MyFunction"
                data : JSON.stringify({ModelsParam: Models}),
                contentType : "application/json",
                success : ServiceSuccess,
                error : ServiceFailed
                });
        }
    }

Answer 1

В функции ReadFile измените нижнюю строку -

dataEx[i] = data;

на

dataEx[totalFiles++] = data;

и избавьтесь от -

totalFiles++