代码之家 › 专栏 › 技术社区 › beginnerDeveloper

将CSV文件读入HTML下拉列表

csv html javascript

-1

beginnerDeveloper · 技术社区 · 8 年前

我正在试着有一个新的开始。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>

2 回复 | 直到 8 年前

Andrew Lohr 8 年前

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

然后是几件小事:

用户需要自己上传文件,所以我添加了一个文件类型的输入,供用户上传他们的csv文件。我将其限制为仅包含csv文件 accept=".csv" 属性
然后你需要一种方法来处理这个文件,我为你准备了handleFile()函数,它使用 FileReader .
接下来,我们使用csv数据调用renderCSMDropdown,我对您的循环进行了一些更新,以循环通过由“,”分割的元素,并将选项节点附加到您的select元素。我还为选项添加了一个文本属性,以便您可以看到它们。

$("#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>

Aditya Bhave 8 年前

要填充下拉列表,我们需要设置

请尝试下面的内容,并将代码放入文档中。就绪功能

var entry = $('<option>').html('value', record.someProperty);

摆弄- https://jsfiddle.net/o2gxgz9r/65565/

注意-我没有使用csv文件,但假设csv被读取并转换为数组