[英]How to save the data as a string from a csv file in javascript?
I'm making a local html5 stats page using Highcharts, and I want to get the data for my charts from a csv file allocated in my own laptop. 我正在使用Highcharts制作本地html5统计信息页面,我想从自己笔记本电脑中分配的csv文件中获取图表数据。 The javascript code is:
javascript代码是:
var arch = new FileReader();
var content = arch.readAsArrayBuffer('./csvs/sample1.csv');
//var content = arch.readAsText('./csvs/sample1.csv'.files);
var sample = $.csv.toArrays(content);
console.log(sample1);
$(function () {
$('#container').highcharts({
xAxis: {
min: -0.5,
max: 5.5
},
yAxis: {
min: 0
},
title: {
text: 'Scatter plot with regression line'
},
series: [{
type: 'line',
name: 'Regression Line',
data: [[0, 1.11], [5, 4.51]],
marker: {
enabled: true
},
states: {
hover: {
lineWidth: 0
}
},
enableMouseTracking: false
}, {
type: 'scatter',
name: 'Observations',
data: sample,
marker: {
radius: 4
}
}]
});
});
I'm using jquery-csv plugin too, but it doesn't work. 我也使用了jquery-csv插件,但是它不起作用。 I've tested with fopen but nothing too.
我已经用fopen测试过了,但是也没有。 The console tells me:
控制台告诉我:
Uncaught TypeError: Failed to execute 'readAsArrayBuffer' on 'FileReader': parameter 1 is not of type 'Blob'. 未捕获的TypeError:无法在“ FileReader”上执行“ readAsArrayBuffer”:参数1的类型不是“ Blob”。
Thanks. 谢谢。
To read local file you need input type file: 要读取本地文件,您需要输入类型文件:
function readSingleFile(evt) { //Retrieve the first (and only!) File from the FileList object var f = evt.target.files[0]; if (f) { var r = new FileReader(); r.onload = function(e) { var contents = e.target.result; document.getElementById('output').innerHTML = contents; } r.readAsText(f); } else { alert("Failed to load file"); } } document.getElementById('fileinput').addEventListener('change', readSingleFile, false);
<input type="file" id="fileinput"/> <textarea id="output" cols="60" rows="10"></textarea>
FileReader.readAsArrayBuffer(..)
expects a Blob as parameter, not a string. FileReader.readAsArrayBuffer(..)
需要Blob作为参数,而不是字符串。 A blob is binary data, read from a file. Blob是从文件读取的二进制数据。 You can find the documentation about FileReader on mdn .
您可以在mdn上找到有关FileReader的文档。
It tells us that we can pass a File
( docs ) instead too, which we can extract from a FileList
( docs ). 它告诉我们,我们可以通过一个
File
( 文档 ),而不是太多,我们可以从提取FileList
( 文档 )。
You cannot read files directly from your computer. 您不能直接从计算机读取文件。 That would be a major security breach.
那将是一个重大的安全漏洞。 What we need to do is have an input element where we either select the file, or where we drag-and-drop the file onto.
我们需要做的是有一个输入元素,我们可以在其中选择文件,也可以将文件拖放到其中。 Then we read the file and execute your code:
然后,我们读取文件并执行您的代码:
<input type="file" id="myfile"> <input type="button" id="csvbutton" value="Load">
And javascript: 和javascript:
$("#csvbutton").on( "click", function() {
var file = $("#myfile")[0].files[0];
if( file == undefined ) {
//RIP
return;
}
var arch = new FileReader();
var content = arch.readAsArrayBuffer(file);
//etc
} );
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.