Question

嗨，我正在尝试读取csv文件（仅位于前端，不希望将其存储在后端）。我收到的错误附在下面的图像中。 enter image description here

我正在尝试的代码是

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"}, …]
    });
  }
}

我只想从文件中读取数据，但出现此错误。我也尝试了其他方法，例如This method I tried first but does not work for me。有人可以帮我吗？

Answer 1

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>

卡在javascript中的CSV文件中

1 个答案: