将CSV数据导入HTML表单 [英] Importing CSV data into HTML form
问题描述
我需要将csv文件中的数据导入表单.我尝试了该主题的示例:
I need to import data from csv file into form. I tried example from this topic:
不幸的是，它对我不起作用.该文件正在打开，但是没有数据放入表格中.
Unfortunately it does not work for me. The file is opening, but no data are put into form.
我的index.html文件如下所示:
My index.html file looks as follows:
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" language="JavaScript" src="script.js"></script>
<script src="https://d3js.org/d3.v3.js"></script>
</head>
<body>
<input id="upload" type="file">
<form id="csvForm">
<input id="a"></input>
<input id="b"></input>
<input id="c"></input>
<input id="d"></input>
</form>
<button id="download">Download</button>
</body>
</html>
和script.js文件:
And script.js file:
document.getElementById("upload").addEventListener("change", upload, false);
document.getElementById("download").addEventListener("click", download, false);
function upload(e) {
var data = null;
var file = e.target.files[0];
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function (event) {
var csvData = event.target.result;
var parsedCSV = d3.csv.parseRows(csvData);
parsedCSV.forEach(function (d, i) {
if (i == 0) return true; // skip the header
document.getElementById(d[0]).value = d[1];
});
}
}
function download(e) {
data = [["id","value"]];
var f = d3.selectAll("#csvForm > input")[0];
f.forEach(function(d,i){
data.push([d.id, d.value]);
});
console.log(data);
var csvContent = "data:text/csv;charset=utf-8,";
data.forEach(function (d, i) {
dataString = d.join(",");
csvContent += i < data.length ? dataString + "\n" : dataString;
});
var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "FormData.csv");
link.click();
}
我还要添加更多内容吗?还有其他库或框架吗?
Shall I add something more? Any other library or framework?
谢谢您的答复.
推荐答案
效果很好，只需将< script type ="text/javascript" language ="JavaScript" src ="script.js"></script> 标记移动到< body> 标记
it works well,
just move <script type="text/javascript" language="JavaScript" src="script.js"></script> tag at the end of your <body> tag
.
.
.
<script src="https://d3js.org/d3.v3.js"></script>
<script type="text/javascript" language="JavaScript" src="script.js"></script>
</body>
更新问题后，我不明白您到底需要什么，您是否要在文本框中查看上载的csv?如果是这样.
I can't understand what exactly you need after updating your question, do you want to view the uploaded csv on the textboxes? if so..
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<input id="upload" type="file">
<form id="csvForm">
<input id="a"></input>
<input id="b"></input>
<input id="c"></input>
<input id="d"></input>
</form>
<button id="download">Download</button>
<script src="https://d3js.org/d3.v3.js"></script>
<script type="text/javascript">
document.getElementById("upload").addEventListener("change", upload, false);
document.getElementById("download").addEventListener("click", download, false);
var out = "";
function upload(e) {
document.getElementById('csvForm').innerHTML = "";
var data = null;
var file = e.target.files[0];
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function (event) {
var csvData = event.target.result;
var parsedCSV = d3.csv.parseRows(csvData);
parsedCSV.forEach(function (d, i) {
if (i == 0) return true; // skip the header
if(d.constructor === Array){
// console.log(d);
// document.getElementById(d[0]).value = d[1];
createForm(d);
}
});
}
}
function createForm(csv){
// console.log(out);
for (var i in csv) {
out+='<input value="' +csv[i]+ '">';
}
document.getElementById('csvForm').innerHTML = out;
out+='<br>';
}
function download(e) {
data = [["id","value"]];
var f = d3.selectAll("#csvForm > input")[0];
f.forEach(function(d,i){
data.push([d.id, d.value]);
});
console.log(data);
var csvContent = "data:text/csv;charset=utf-8,";
data.forEach(function (d, i) {
dataString = d.join(",");
csvContent += i < data.length ? dataString + "\n" : dataString;
});
var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "FormData.csv");
link.click();
}
</script>
</body>
</html>这篇关于将CSV数据导入HTML表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
