Importing CSV data into HTML form

问题

I need to import data from csv file into form. I tried example from this topic:

How to import CSV file into HTML form, and export HTML form to CSV file

Unfortunately it does not work for me. The file is opening, but no data are put into form.

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>

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?

Thank you for any replies.

回答1:

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>

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>

回答2:

Once again thank you for help. But I've got another problem. Now I need to add this uploading control to my web application. The content is generated automatically depending on users behaviour. The part of the code responsible for opening the form is as follows:

function  createFormOrderDetailsCSV()
{
    var out='';
    out+='<input id="upload" type="file">';
    out+='<form id="csvForm">';
    out+='<input id="a"></input>';
    out+='<input id="b"></input>';
    out+='<input id="c"></input>';
    out+='<input id="d"></input>';
    out+='</form>';
    out+='<script src="https://d3js.org/d3.v3.js"></script>';
    document.getElementById("OrderDetailsContainer").innerHTML=out;
    document.getElementById("upload").addEventListener("change", upload, 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];
        });

    }
}

And again it is the same. File is open, but no data is transferred to the text input controls in the form.

来源：https://stackoverflow.com/questions/52732363/importing-csv-data-into-html-form

标签

javascript

html

csv