时间戳

首页 > 解决方案 > 将 CSV 文件读取到 HTML 下拉菜单

javascript - 将 CSV 文件读取到 HTML 下拉菜单

问题描述

我正在尝试将 .csv 文件读取到 HTML 中的下拉列表中。目前使用下面的代码，我的下拉列表没有被填充。我不确定是因为我的路径还是我在 HTML 中没有正确调用它。有什么建议吗？

代码（我发现这个代码作为一个例子，并试图实现它来测试没有运气）：

(function() {

  var csv_path = "C:\Users\userName\Documents\Qlik\Request Page\streamFileTEST.csv";

  var renderCSVDropdown = function(csv) {
    var dropdown = $('select#selectStyle');
    for (var i = 0; i < csv.length; i++) {
      var record = csv[i];
      var entry = $('<option>').attr('value', record.someProperty);
      console.log(record);
      dropdown.append(entry);
    }
  };

  $.get(csv_path, function(data) {
    var csv = CSVToArray(data);
    renderCSVDropdown(csv);
  });

}());

function CSVToArray(strData, strDelimiter) {

  strDelimiter = (strDelimiter || ",");

  var objPattern = new RegExp((
    "(\\" + strDelimiter + "|\\r?\\n|\\r|^)" +

    "(?:\"([^\"]*(?:\"\"[^\"]*)*)\"|" +

    "([^\"\\" + strDelimiter + "\\r\\n]*))"
  ), "gi");


  var arrData = [
    []
  ];

  var arrMatches = null;

  while (arrMatches = objPattern.exec(strData)) {

    var strMatchedDelimiter = arrMatches[1];

    if (strMatchedDelimiter.length && strMatchedDelimiter !== strDelimiter) {

      arrData.push([]);

    }

    var strMatchedValue;

    if (arrMatches[2]) {

      strMatchedValue = arrMatches[2].replace(new RegExp("\"\"", "g"), "\"");

    } else {
      strMatchedValue = arrMatches[3];

    }

    arrData[arrData.length - 1].push(strMatchedValue);
  }

  return (arrData);
}
#selectStyle {
  height: 29px;
  overflow: hidden;
  width: 470px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="imgQlik" src="qlik-sense-logo.png">
<hr>
<form action="mailto:emailAddress.com" method="post" enctype="text/plain">
  <div>
    <table id="requestTable">
      <tbody>
        <tr>
          <td class="tdLabel">
            <label>Name:</label>
          </td>
          <td class="tdInput">
            <input type="text" id="user-name" name="display-name" pattern="[A-Za-z\s]+" maxlength="50" minlength="2" required>
          </td>
        </tr>
        <tr>
          <td class="tdLabel">
            <label>Stream List:</label>
          </td>
          <td>
            <select id="selectStyle" name="streamlistselect"></select>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <input class="buttonRequest" type="submit" value="Submit Request">

</form>

标签： javascripthtmlcsv

解决方案

1个主要概念-出于安全考虑，您无法通过浏览器读取文件系统。所以做一个get请求是C:\Users\userName\....行不通的。

然后只是一些小事情之后：

  1. 用户需要自己上传文件，所以我添加了一个文件类型的输入供您的用户上传他们的 csv 文件。我将其限制为仅具有accept=".csv"属性的 csv 文件

  2. 然后您需要一种处理该文件的方法，我为您整理了 handleFile() 函数，该函数使用FileReader从上传的 csv 文件中读取数据。

  3. 接下来，我们使用 csv 数据调用 renderCSMDropdown，我稍微更新了您的循环以遍历由“，”分隔的元素，并将选项节点附加到您的选择元素。我还在选项中添加了一个文本属性，以便您可以看到它们。

$("#inputFile").on("change", handleFile);

var renderCSVDropdown = function(csv) {
  var dropdown = $('#selectStyle');
  var elements = csv.split(",");
  for (var i = 0; i < elements.length; i++) {
    var record = elements[i];
    var entry = $('<option>', {value: record, text: record})
    dropdown.append(entry);
  }
};

function handleFile() {
    var file = $(this).prop('files')[0];
    var fileReader = new FileReader();
    fileReader.onload = function (evt) {
      renderCSVDropdown(evt.target.result);
    };
    fileReader.readAsText(file, "UTF-8");
}
#selectStyle {
  height: 29px;
  overflow: hidden;
  width: 470px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="imgQlik" src="qlik-sense-logo.png">
<hr>
Choose csv file: <input type="file" id="inputFile" accept=".csv"><br/><br/>
<form action="mailto:emailAddress.com" method="post" enctype="text/plain">
  <div>
    <table id="requestTable">
      <tbody>
        <tr>
          <td class="tdLabel">
            <label>Name:</label>
          </td>
          <td class="tdInput">
            <input type="text" id="user-name" name="display-name" pattern="[A-Za-z\s]+" maxlength="50" minlength="2" required>
          </td>
        </tr>
        <tr>
          <td class="tdLabel">
            <label>Stream List:</label>
          </td>
          <td>
            <select id="selectStyle" name="streamlistselect"></select>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <input class="buttonRequest" type="submit" value="Submit Request">

</form>

推荐阅读