时间戳

首页 > 解决方案 > 卡在 javascript 中读取 CSV 文件

javascript - 卡在 javascript 中读取 CSV 文件

问题描述

您好我正在尝试读取 csv 文件（只是在前端不想将其存储在后端）。我得到的错误附在下面的图片中。 在此处输入图像描述

我正在尝试的代码是。

function file(){
       var fullPath = document.getElementById('upload').value;

       if (fullPath) {
            var startIndex = (fullPath.indexOf('\\') >= 0 ? fullPath.lastIndexOf('\\') : fullPath.lastIndexOf('/'));
            var filename = fullPath.substring(startIndex);

       if (filename.indexOf('\\') === 0 || filename.indexOf('/') === 0) {
        filename = filename.substring(1);
       }

    alert(filename);
   // passFile(filename);
    d3.csv(filename, function(error, data) {
        if (error) throw error;
           console.log(data); // [{"Hello": "world"}, …]
    });
  }
}

我只想从文件中读取数据但收到此错误。我也尝试过其他方法，例如我首先尝试的这种方法，但对我不起作用。谁能帮我吗？

标签： javascriptjqueryd3.js

解决方案

d3.csv()函数用于从远程位置获取 csv 文件。如果你想按<input type="file">元素读取本地文件，你应该使用FileReader自己读取文件并用d3.csvParse()函数解析它。

例如：

function file(){
	var uploadFileEl = document.getElementById('upload');
	
	if(uploadFileEl.files.length > 0){
		var reader = new FileReader();
		reader.onload = function(e) {
			console.log(d3.csvParse(reader.result));
		}
		reader.readAsText(uploadFileEl.files[0]);
	}
}
<input type="file" id="upload" />
<button id="upload" onclick="file()">Read CSV</button>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.1/d3.min.js"></script>

推荐阅读