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

问题描述 投票:2回答:1

我有一个包含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文件并创建它的相应映射并将其存储在某个地方,我想可能在一个地图数组或类似的东西那。因此,当用户按下单击按钮时,可以读取每个地图数组元素,然后将其作为JSON传递给Web服务。

任何想法如何实现这一目标?我基本上都在努力处理将所有选定的txt文件转换为地图然后安全地存储它的部分,以便以后当用户按下单击按钮时可以访问它。

更新:

我在下面试过,但这不起作用。基本上在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
                });
        }
    }
javascript jquery html html5
1个回答
1
投票

在ReadFile函数中更改以下行 -

dataEx[i] = data;

dataEx[totalFiles++] = data;

也摆脱 -

totalFiles++
© www.soinside.com 2019 - 2024. All rights reserved.