index.html

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Read Text File</title>
</head>

<body>
    <input type="file" name="inputfile" id="inputfile">
    <br>

    <div id="output"></div>

    <script type="text/javascript">
        document.getElementById('inputfile')
            .addEventListener('change', function () {
                var fr = new FileReader();
                fr.onload = function () {
                    // document.getElementById('output')
                    //     .textContent = fr.result;

                    document.getElementById('output').innerHTML = csvJSON(fr.result)

                    console.log(csvJSON(fr.result))
                }

                fr.readAsText(this.files[0], 'ISO-8859-1');
            })


        //var csv is the CSV file with headers
            function csvJSON(csv) {

                var lines = csv.split("\n");

                var result = [];

                // NOTE: If your columns contain commas in their values, you'll need
                // to deal with those before doing the next step 
                // (you might convert them to &&& or something, then covert them back later)
                // jsfiddle showing the issue https://jsfiddle.net/
                var headers = lines[0].split(",");
                console.log(headers)

                for (var i = 1; i < lines.length; i++) {

                    var obj = {};
                    var currentline = lines[i].split(",");

                    for (var j = 0; j < headers.length; j++) {
                        obj[headers[j]] = currentline[j];
                    }

                    result.push(obj);

                }

              //  return result; //JavaScript object
                return JSON.stringify(result); //JSON
            }
    </script>
</body>

</html>