使用JavaScript将tsv文件上传按钮添加到Jupyter笔记本

因此，我正在使用Jupyter4.x和Python3.5，试图“上传”一个

.tsv

，但实际上只是试图将其捕获为一个字符串，然后使用

setTimeout（function（）{IPython.notebook.kernel.execute（“stringData=StringIO（+“fr.result”）”）；}，5000）

要让
FileReader（）
对象有时间完成二进制字符串转换，请将字符串保存到python变量中。我通过在控制台中打印整个
.tsv
文件来测试
Filereader（）
是否正常工作。但是，由于某些原因，stringData在python端仍然没有定义

%%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>

另外，我对javascript有点陌生，所以欢迎任何建议，我只认为这是一种简单的方法。请？当然，非常感谢
 
FileReader
方法是异步的，因此在尝试将
outputString
设置为结果时没有加载数据

处理此问题的正确方法是使用
load
事件处理程序，因此，您可以将代码修改为以下内容，而不是使用
setTimeout（）
（异步处理不可靠）：

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">


函数句柄文件（）{
var file=this.files[0]；/“this”是调用元素
var fr=new FileReader（）；
fr.onload=函数（）{
var outputString=this.result；//这里数据准备就绪。现在“this”=fr
var command=“dataString=”+outputString+”；
//IPython.notebook.kernel.execute（命令）；
log（“加载的文件.命令：”，命令）；
};
fr.readAsText（文件）；//异步调用
}
document.getElementById（“CSVFileInput”）.addEventListener（“更改”，HandleFile）
FileReader
方法是异步的，因此在尝试将
outputString
设置为结果时没有加载数据

处理此问题的正确方法是使用
load
事件处理程序，因此，您可以将代码修改为以下内容，而不是使用
setTimeout（）
（异步处理不可靠）：

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">


函数句柄文件（）{
var file=this.files[0]；/“this”是调用元素
var fr=new FileReader（）；
fr.onload=函数（）{
var outputString=this.result；//这里数据准备就绪。现在“this”=fr
var command=“dataString=”+outputString+”；
//IPython.notebook.kernel.execute（命令）；
log（“加载的文件.命令：”，命令）；
};
fr.readAsText（文件）；//异步调用
}
document.getElementById（“CSVFileInput”）.addEventListener（“更改”，HandleFile）
因此，@K3N确实给了我一个关于异步函数的宝贵的谜题和教训。然而，主要的问题是python无法识别它从javascript接收到的字符串输入，所以我想我应该与大家分享我的旅程。最后，我将字符串转换为2d javascript数组，然后我将列名的第一行
shift（）
去掉，将其余的行转置，并从英语中清除所有阻止它工作的愚蠢内容（引号和撇号）。现在我可以
pd.DataFrame（dict（zip（colNames，cols））
并在从文件系统读入它时在同一
.tsv
上运行所有计算。这是完整的脚本，基本上是@K3N向我展示的补丁，加上
pythonify（arr）
函数：



函数句柄文件（）{
//读入文件并实例化filereader
让file=this.files[0]；/“this”是调用元素
设fr=newfilereader（）；
fr.onload=函数（）{
//行上分离式测力仪（CRLF）
让outputBuffer=this.result.split（“\r\n”）；
让命令；
//将outputBuffer拆分为2d数组
outputBuffer=outputBuffer.map（line=>line.split（“\t”）；
//输出缓冲区中的pop名称行
让names=outputBuffer.shift（）；
//优化转置
outputBuffer=outputBuffer.reduce(
（临时，世界其他地区）=>
行映射（（元素，i）=>
（温度[i]| |[]）.concat（元素））
，[]//初始化临时值
);
//构建python命令
command=“colNames=“+pythonify（名称）；
//向笔记本内核发送命令
IPython.notebook.kernel.execute（命令）；
//循环在python端追加列
对于（设i=0；i对于（i=0；iSo，@K3N无疑给了我一个关于异步函数的宝贵的谜题和教训。然而，主要问题是python无法识别它从javascript接收的字符串输入，因此我想我应该与大家分享我的旅程。我最终将字符串转换为2d javascript数组，然后我
shift（）
将列名的第一行去掉，将其余的行转置，并从英语中清除所有阻止它工作的愚蠢内容（引号和撇号）。现在我可以
pd.DataFrame（dict（zip（colNames，cols）））
并在从文件系统读入时在同一个
.tsv
上运行所有计算。以下是完整的脚本，基本上是@K3N向我展示的补丁以及
pythonify（arr）
函数：



函数句柄文件（）{
//读入文件并实例化filereader
让file=thi
document.getElementById("CSVFileInput").addEventListener("change", handleFiles);