时间戳

首页 > 解决方案 > 使用JS从输入标签中读取多个文件

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

问题描述

我有一个包含 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 服务函数。

我现在想达到什么目标？

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

标签： javascriptjqueryhtml

解决方案

在 ReadFile 函数中更改以下行 -

dataEx[i] = data;

到

dataEx[totalFiles++] = data;

也摆脱-

totalFiles++

推荐阅读