Papaparse/vfile 不工作 - 乱码输出

Question

我发布了一个关于解析大型 csv 文件的问题。它涉及读取 csv 文件并将其制表。我尝试使用其中一个回复中给出的代码，但它不起作用..

这是我的全部代码：

<!DOCTYPE html>
 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="PapaParse-4.1.0/papaparse.js"></script>
<script src="virtual-list-master/vlist.js"></script>
<script>
$("#fUpload").bind("change", function(evt) {
    var bigFile = evt.target.files[0];
    var rows = [];

    Papa.parse(bigFile, {
        delimiter: ",",
        newline: "\n",
        header: false,
        dynamicTyping: false,
        worker: false,
        chunk: function(results) {
            rows = rows.concat(results.data);
        },
        complete: function() {
            var list = new VirtualList({
              h: 300,
              itemHeight: 30,
              totalRows: rows.length - 1,
              generatorFn: function(row) {
                  var el = document.createElement("tr");
                  var html = '';
                  html += '<td>' + row + '</td>';
                  for(var j = 0; j < rows[row].length; j++) {
                      html += '<td>' + rows[row][j] + '</td>';
                  }
                  el.innerHTML = html;
                  return el;
              }
            });

            document.getElementById('table').appendChild(list.container)
        }
    });
});
</script>

<input type="file" id="fUpload" />
<table style="width: 100%">
    <tbody id="table">
    </tbody>
</table>

我的当前工作目录中有 Papaparse-4.1.0 和 virtual-list-master 文件夹。但是当我在浏览器中打开它并上传一个 csv 文件时，下面没有打印 table。上传功能似乎没有缺陷，因为回答者展示了相同的 fiddle 演示；我只是在这里重用它。您可以在此处查看 fiddle：http://jsfiddle.net/8e99j5v9/5/

有人可以告诉我为什么我的代码不起作用吗？

编辑我感谢 Sergiu 提出了一个可行的解决方案，但是交付的结果 table 完全是乱码。行和列像这样重叠

有人可以帮忙吗？

Answer 1

JavaScript 代码是 interpreted/executed 它在 HTML 结构中出现的顺序。它也只会在"have access"到HTML之前而已。所以 $("#fUpload") 将尝试在 body 中找到 ID 为 #fUpload 的元素，但考虑到我之前所说的（东西的顺序是 "loaded/executed"） 它不会找到任何东西，因为<input type="file" id="fUpload" />是在这个script标签之后。

解决方案： 1) 移动 head 部分中的 <script> 标签 and the input and table in abodysection and move the$("#fUpload").bind(...code in a$(document ).ready` 回调。(Read about it here)

2) 将输入和 table 移动到 脚本标签上方。

为什么 1 会起作用？因为 $(document).ready(...。这告诉它里面的代码在整个HTML（包括输入）被加载后执行。

Papaparse/vfile 不工作 - 乱码输出

Papaparse/vfile doesnt work- Garbled output

javascript

csv

jquery

papaparse