Question

我正在尝试构建基本的CSV编辑器，它使用html + css作为UI，而Ruby正在进行字符串解析和操作。

function passFileToRuby (f) {

var     reader = new FileReader(),
        txt

reader.readAsText(f);
txt = reader.result

return txt

}

和一些html：

<html>
  <head>
    <script src="../js/script.js"></script>
  </head>
  <body>
    <h1>CSVEditor!</h1>
    <form action="/form" method="post">
          <input type="file" name="file" id="input" onchange="passFileToRuby(this.files[0])">
          <input type="submit">
    </form>
  </body>
</html>

我正在尝试通过html表单加载csv文件，将其传递给Ruby（Sinatra），它会将其拆分并将其呈现为表格内容。

当我加载一个文件然后输入passFileToRuby（）行的内容后，一切似乎都工作 - console.log（txt）将文件的内容打印到屏幕上。当我将它作为passFileToRuby函数传递给onchange属性时，它不返回任何内容，txt为null。

请告知。

Answer 1

当input发生变化时，可能尚未加载该文件 - 它太快了。当您从控制台访问时，浏览器有时间上传内容。

尝试将loaded事件处理程序附加到阅读器，而不是直接访问result。

var reader = new FileReader();
reader.onload = function(evt) {
  handleText(reader.result);
}
reader.readAsText(f);

并正确实施handleText。

使用JS和html的输入文件API将csv文件传递给Ruby

1 个答案: