Javascript 使用papa parse将CSV动态加载到模板中

目前，我正在通过“打开”对话框手动加载CSV文件。 我想知道当页面加载到给定的模板中时，如何才能按常规加载它

<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);
            }

        });
    }

函数加载CSV（文件列表）{
var file=fileList[0]；
log（“文件：”，文件）；
parse（文件{
分隔符：“，”，
标题：对，
完成：功能（结果）{
log（“全部完成！”，结果[“数据]）；
var resArr=结果[“数据”]；
var$threadList=$（“#线程列表”）；
对于（变量k=0；k”+resArr[k][“threadName”]+”
”+
"                            " +
“+”“+resArr[k][“messageCount”]+”“+”+
“+resArr[k][“价格”]+”+
"                            " +
“
”+
"                    " +
"                    " +
"                        " +
"                            " +
"" +
"                        " +
"                    " +
"                " +
"           ";
$threadList.append（html）；
}
},
错误：函数（）{
log（“错误！”，参数）；
}
});
}

---

任何想法或建议都将不胜感激

将文件放在服务器上并使用ajaxI必须首先使其从本地文件CSV工作，然后必须手动选择它。出于安全原因，您无法访问文件系统程序。非常感谢@charlietfl您提供了很大的帮助