javascript - 从html中上传的csv文件中提取标题

问题描述

我想提取我上传的 csv 文件的标题行并将它们显示为复选框选项。目前，我根据“\n”拆分，然后在“，”上拆分以获取各个列名。但是，它不适用于所有 csv 文件，并且有些文件无法正确拆分（例如，数据单元格作为列标题返回）。有什么我可以使用的功能吗？谢谢！我的代码如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

    <!-- jquery -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.7.7/xlsx.core.min.js"></script>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xls/0.7.4-a/xls.core.min.js"></script>  
    <script type="text/javascript">
        /*---CSV FUNCTION---*/
        function getColumns_csv() {   
            var reader = new FileReader();
            reader.onload = function(e){
                var data = e.target.result;
                var header = data.split("\n")[0] //<--- is there a better way to split columns?
                header = header.split(",");

                var cnt = 1;
                $('#columnCheckbox').empty();

                header.forEach(function(y){
                    $('#columnCheckbox').append('<td><input type="checkbox" name='+y+' id="columnSelect'+cnt+'" class="chkbx">'+y+'</td>');
                    cnt++;
                });

                $('.chkbx').on('click',function(){
                    if($('.chkbx:checked').length == $('.chkbx').length){
                        $('#checkall').prop('checked',true);
                    }else{
                        $('#checkall').prop('checked',false);
                    }
                });

                $('.hiddeninputs').show();
                $('#submission').show();
            }
            reader.readAsText($('#datafile')[0].files[0]);
        } 
        /*---//CSV FUNCTION---*/
    </script>
    <script type="text/javascript">
        //select all button
        $(document).ready(function(){
            $('#checkall').on('click',function(){
                if(this.checked){
                    $('.chkbx').each(function(){
                        this.checked = true;
                    });
                }else{
                     $('.chkbx').each(function(){
                        this.checked = false;
                    });
                }
            });
        });
    </script>
</head>
<body>
    <div>
        <h3>Upload File</h3>

        <!-- form to post file -->
        <form method="post" enctype="multipart/form-data" id="fileform">
            <input type="file" name="datafile" id="datafile">
            <button type="button" class="btn btn-info" name="upload" id="upload" onclick="getColumns_csv()">Upload File</button>
            <br></br>

            <table class="hiddeninputs" hidden="hidden">
                <tr>
                    <td><input type="checkbox" id="checkall">Select all</td>
                </tr>
                <tr id="columnCheckbox"></tr>
            </table>
            <br>
            <input type="submit" class="btn btn-info" value="submit" id="submission">
        </form>
    </div>
</body>
</html>

标签： javascriptjqueryhtml

javascript - 从html中上传的csv文件中提取标题

问题描述

解决方案

推荐阅读