javascript - 使用 JavaScript 将 tsv 文件上传按钮添加到 Jupyter Notebook

Question

所以我正在使用 Jupyter 4.x 和 python 3.5，尝试“上传”.tsv，但实际上只是尝试将其捕获为字符串，然后使用 setTimeout(function(){IPython.notebook.kernel.execute("stringData=StringIO(+"fr.result")");},5000);

允许FileReader()对象有时间完成二进制字符串转换，然后将字符串保存到Python变量中。我通过在控制台中打印整个 .tsv 文件来测试 Filereader() 是否正常工作。但出于某种原因，stringData 在 python 端仍然未定义。这是 javascript 单元格:

%%HTML
<input type="file" id="CSVFileInput" onchange="handleFiles(this.files)" value="upload csv">

<script>
var inputElement=document.getElementById('CSVFileInput');
function handleFiles() {
    var file = inputElement.files[0];
    var fr = new FileReader();
    fr.readAsText(file);
    var outputString=fr.result;
    var command = "dataString ='"+outputString+"'";  
    setTimeout(function(){
        IPython.notebook.kernel.execute(command);}
        ,5000);
}
inputElement.addEventListener("change", handleFiles, false);
</script>

在下一个单元格中，我测试输出并得到 NameError 因为 dataString 未定义，这是下一个单元格:

dataString

另外，我对 javascript 有点陌生，所以欢迎任何和所有的建议，我只认为这是最简单的方法。请问？当然，非常感谢!

Answer 1

FileReader 方法是异步的，因此在您尝试将 outputString 设置为结果时没有加载任何数据。

处理此问题的正确方法是使用 load 事件处理程序，因此您可以修改代码如下:

function handleFiles() {
  var file = this.files[0];              // "this" is the calling element
  var fr = new FileReader();
  fr.onload = function() {
    var outputString = this.result;      // here the data is ready. Now "this" = fr
    var command = "dataString ='" + outputString + "'";  
    IPython.notebook.kernel.execute(command);
  };
  fr.readAsText(file);                   // invoked asynchronously
}

同时删除 HTML 中的内联 JavaScript:

<input type="file" id="CSVFileInput" onchange="handleFiles(this.files)" value="upload csv">

至

<input type="file" id="CSVFileInput" title="upload csv">

(当输入为 type=file 时，value 无效，请改用 title)。然后使用以下代码来处理事件处理(在 DOM 加载之后):

document.getElementById("CSVFileInput").addEventListener("change", handleFiles);

function handleFiles() {
  var file = this.files[0];              // "this" is the calling element
  var fr = new FileReader();
  fr.onload = function() {
    var outputString = this.result;      // here the data is ready. Now "this" = fr
    var command = "dataString ='" + outputString + "'";  
    //IPython.notebook.kernel.execute(command);
    console.log("Loaded file. Command:", command);
  };
  fr.readAsText(file);                   // invoked asynchronously
}

document.getElementById("CSVFileInput").addEventListener("change", handleFiles);

<input type="file" id="CSVFileInput" title="upload csv">