Box*_*uan 6 html javascript d3.js
我昨天刚开始学习 JavaScript，但一开始就被困住了。
我的目标是创建一个简单的本地 html 页面，该页面读取一个 csv 文件，将其打印到页面上，然后使用 d3.js 绘制它。这是我到目前为止所做的：
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Test Program</title>
<meta charset="UTF-8"/>
<script>
function uploadConfirmation(){
alert("Data Loaded!");
}
function displayData(){
var dataset = document.getElementById("uploaded_data").value;
var show = [];
for (var i=0; i < dataset.length; i++) {
show.push('<span>' + dataset[i] + '</span>');
}
</script>
</head>
<body>
<h1>My Test Web Page</h1>
<form>
Upload some files?
<br/>
<input type="file" id="uploaded_data"/>
<br/>
<input type="submit" onmouseup="uploadConfirmation()"/>
<button type="button" onclick="displayData()">Display Data</button>
</form>
</body>
</html>
有人能告诉我解决这个问题的正确逻辑吗？
更新
感谢所有评论。我设法在网上找到了一些资源并想出了一些代码。我希望它对其他人有帮助。
继从@tampis方向，这里有两个有用的资源在线：
-使用AJAX上传文件
-使用文件API上传文件
这是我上传和显示数据的代码：
<input type="file" id="fileinput" />
<script>
function readSingleFile(evt) {
var f = evt.target.files[0];
if (f) {
var r = new FileReader();
r.onload = function(e) {
var contents = e.target.result;
document.write("File Uploaded! <br />" + "name: " + f.name + "<br />" + "content: " + contents + "<br />" + "type: " + f.type + "<br />" + "size: " + f.size + " bytes <br />");
var lines = contents.split("\n"), output = [];
for (var i=0; i<lines.length; i++){
output.push("<tr><td>" + lines[i].split(",").join("</td><td>") + "</td></tr>");
}
output = "<table>" + output.join("") + "</table>";
document.write(output);
}
r.readAsText(f);
document.write(output);
} else {
alert("Failed to load file");
}
}
document.getElementById('fileinput').addEventListener('change', readSingleFile);
</script>
正如@shadysherif（来自评论）指出的那样，在此处重新发布答案（带有完整的工作代码）。
这里有两个有用的资源在线：
-使用AJAX上传文件
-使用文件API上传文件
这是我上传和显示数据的代码：
<input type="file" id="fileinput" />
<script>
function readSingleFile(evt) {
var f = evt.target.files[0];
if (f) {
var r = new FileReader();
r.onload = function(e) {
var contents = e.target.result;
document.write("File Uploaded! <br />" + "name: " + f.name + "<br />" + "content: " + contents + "<br />" + "type: " + f.type + "<br />" + "size: " + f.size + " bytes <br />");
var lines = contents.split("\n"), output = [];
for (var i=0; i<lines.length; i++){
output.push("<tr><td>" + lines[i].split(",").join("</td><td>") + "</td></tr>");
}
output = "<table>" + output.join("") + "</table>";
document.write(output);
}
r.readAsText(f);
document.write(output);
} else {
alert("Failed to load file");
}
}
document.getElementById('fileinput').addEventListener('change', readSingleFile);
</script>
| 归档时间： |
|
| 查看次数： |
14280 次 |
| 最近记录： |