Question

我需要能够从CSV文件中获取数据（用户通过<input type="file" id="fileInput">选择）并将其放入数组中。我宁愿避免使用jquery，因为我之前没有使用它，但任何帮助都会受到赞赏。这是我的代码：

<div id="page-wrapper">
  <div>
    Select a text file: 
    <input type="file" id="fileInput">
  </div>
  <pre id="fileDisplayArea"><pre>
</div>
<p id="csvData"></p>
<button onClick="test()">Show Text</button>

<script>
function test (){
  var file = fileInput.files[0];
  var textType = /text.*/;
  var csvType = 'application/vnd.ms-excel';

  if (file.type.match(csvType)) {
    var reader = new FileReader();
    reader.onload = function(e) {
      document.getElementById("csvData").innerHTML=reader.result;
    }

    reader.readAsText(file);  
  } else {
    fileDisplayArea.innerText = "File not supported!";
  }
}
</script>

Answer 1

要处理csv类型文件，您需要做两件事：

拆分为行
拆分为列

您可以使用String.prototype.split同时执行这两项操作。此方法将字符串拆分为数组。要在每个新行上拆分，请使用正则表达式/\n/。要拆分每列，请使用数据中使用的字符（可能是,或;）。

以下是一个例子：

// Create an array of arrays
// Remove first line
// Split by ","
function process(dataString) {
  var lines = dataString
    .split(/\n/)                     // Convert to one string per line
    .map(function(lineStr) {
        return lineStr.split(",");   // Convert each line to array (,)
    })
    .slice(1);                       // Discard header line
  
  return JSON.stringify(lines, null, 2);
}


function test() {
  var file = fileInput.files[0];
  var textType = /text.*/;
  var csvType = 'text/csv';
  if (file.type.match(csvType)) {
    var reader = new FileReader();
    reader.onload = function(e) {
      document.getElementById("csvData").innerHTML = process(reader.result);
    }

    reader.readAsText(file);
  } else {
    fileDisplayArea.innerText = "File not supported!";
  }
}

<div id="page-wrapper">
  <div>
    Select a text file:
    <input type="file" id="fileInput" />
  </div>
  <pre id="fileDisplayArea"></pre>
  <pre id="csvData"></pre>
  <button onClick="test()">Show Text</button>
</div>

将此数据代码段存储为.csv文件以进行测试：

ONE,TWO,THREE
1,2,3
2,4,6
3,6,9

另外需要注意：如果您的数据中有标题行，就像上面的示例一样，我强烈建议您不要映射到数组，而是映射到对象。这使您的代码更易于阅读和使用：

// Create an array of objects
// Use the first line as keys
// Split by ","
function process(dataString) {
  var lines = dataString
    .split(/\n/)
    .map(function(lineStr) {
        return lineStr.split(",");
    });
  
  var keys = lines[0];

  var objects = lines
    .slice(1)
    .map(function(arr) {
      return arr.reduce(function(obj, val, i) {
        obj[keys[i]] = val; 
        return obj;
      }, {});
    });
  
  return JSON.stringify(objects, null, 2);
}


function test() {
  var file = fileInput.files[0];
  var textType = /text.*/;
  var csvType = 'text/csv';
  if (file.type.match(csvType)) {
    var reader = new FileReader();
    reader.onload = function(e) {
      document.getElementById("csvData").innerHTML = process(reader.result);
    }

    reader.readAsText(file);
  } else {
    fileDisplayArea.innerText = "File not supported!";
  }
}

<div id="page-wrapper">
  <div>
    Select a text file:
    <input type="file" id="fileInput" />
  </div>
  <pre id="fileDisplayArea"></pre>
  <pre id="csvData"></pre>
  <button onClick="test()">Show Text</button>
</div>

将数据从csv文件放入数组（Javascript）

1 个答案: