使用papa解析动态地将CSV加载到模板中

Question

目前我通过Open Dialog手动加载CSV文件。 我想知道如何在页面加载到给定模板时以dinamycally方式加载它。

<input class="input-file" type="file" id="input" onchange="loadCsv(this.files)">

这是我当前的javascript，我通过输入

加载CSV文件

function loadCsv(fileList) {
        var file = fileList[0];
        console.log("file: ", file);
        Papa.parse(file, {
            delimiter: ",",
            header: true,
            complete: function (result) {
                console.log("All done!", result["data"]);
                var resArr = result["data"];
                var $threadList = $("#thread-list");
                for (var k = 0; k < resArr.length; ++k) {
                    var html =
                        "           <div class=\"users-wrap col-md-12\">" +
                        "               <div class=\"row each-user\">" +
                        "                    <div class=\"avatar col-md-3 col-sm-3 col-xs-3\">" +
                        "                        <img class=\"img-responsive img-circle\" src=\"" + resArr[k]["avatarAssetLink"] + "\">" +
                        "                    </div>" +
                        "                    <div class=\"name col-md-6 col-sm-6 col-xs-6 text-left\">" +
                        "                        <p class='details'>" + resArr[k]["threadName"] + "<br />" +
                        "                            <span class='msg-price'>" +
                        "                           <span class='messages-counted'>" + " <strong> " +resArr[k]["messageCount"] +" </strong>" + '</span>'+
                        "                               <span class='price'> " + resArr[k]["Price"] + '</span>' +
                        "                            </span>" +
                        "                        </p>" +
                        "                    </div>" +
                        "                    <div class=\"checkbox-wrap col-md-3 col-sm-3 col-xs-3\">" +
                        "                        <div class=\"checkbox-as pull-right\">" +
                        "                            <i class=\"glyphicon glyphicon-ok\">" +
                        "</i>" +
                        "                        </div>" +
                        "                    </div>" +
                        "                </div>" +
                        "           </div>";
                    $threadList.append(html);
                }

            },
            error: function () {
                console.log("error!", arguments);
            }

        });
    }

感谢任何想法或建议！