使用 js codeigniter 以表单形式读取文件答案

【问题标题】：read file in form with js codeigniter使用 js codeigniter 以表单形式读取文件
【发布时间】：2021-08-03 13:41:54
【问题描述】：

我需要创建一个包含两个 textarea 和 1 个文件输入的表单，该表单上传一个 txt/csv 文件，其中两行中有 2 个数字（1 行 - 1 个数字），并使用 codeigniter 用这两个数字填充 2 textarea 和Javascript。感谢您的帮助

html

<input type="file" id="id">
<br>
<textarea id="result1" cols="50"></textarea>
<textarea id="result2" cols="50"></textarea>
<textarea id="result3" cols="50"></textarea>
<textarea id="result4" cols="50"></textarea>

如果有 1 个 textarea 打印结果，这就是 js，但每一行都需要打印在一个 textarea 中并且不起作用

  $("#id").on('change', function(event){
        event.preventDefault();
        
        var selectedFile = event.target.files[0];
        var reader = new FileReader();
      
        var result = document.getElementById("param3");
      
        reader.onload = function(event) {
          result.innerHTML = event.target.result;
        };
      
        reader.readAsText(selectedFile);
    });

【问题讨论】：

标签： javascript php jquery ajax codeigniter

【解决方案1】：

要实现这一点，您可以使用split() 将从文本文件读取的值转换为数组，每行文本一个元素。

然后您可以遍历该数组并设置每个 textarea 中的值。试试这个：

<input type="file" id="id"><br />

<textarea class="result" id="result1" cols="50"></textarea>
<textarea class="result" id="result2" cols="50"></textarea>
<textarea class="result" id="result3" cols="50"></textarea>
<textarea class="result" id="result4" cols="50"></textarea>

let $results = $('.result');

$("#id").on('change', e => {
  e.preventDefault();

  var reader = new FileReader();
  reader.onload = e => {
    e.target.result.split(/\r\n/).forEach((text, i) => {
      $results.eq(i).val(text);
    });
  };
  reader.readAsText(e.target.files[0]);
});

请注意，我将相同的 class 属性应用于 textarea 元素以使逻辑更加简单。一般来说，增量id 属性是一种反模式，应尽可能避免。

这是jsFiddle 中的一个工作示例（因为 SO sn-ps 是沙盒化的，不能使用 FileReader）。您需要自己创建一个文本文件才能看到它的实际效果。

【讨论】：