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 的var中。稍后在Execute函数中调用此函数，以传递给Web Service函数。

我现在想要实现什么？

<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传递给Web服务。

任何想法如何实现？基本上是在将所有选定的txt文件都转换为地图然后安全地存储它的部分上苦苦挣扎，以便以后在用户按下 click 按钮时可以访问它。

更新：

我在下面尝试过，但这不起作用。基本上，在Execute函数中，var 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++

使用JS从输入标签读取多个文件

1 个答案: