js 导入文件读取本地json文件内容

最新推荐文章于 2024-08-16 16:27:09 发布

都怪宇宙

最新推荐文章于 2024-08-16 16:27:09 发布

阅读量6.7k

点赞数

文章标签： js json

本文链接：https://blog.csdn.net/weixin_43439494/article/details/98504474

版权

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

</head>
<body>
<div>
    <input type="file" id="files" style="display: none" onchange="fileImport();">
    <input type="button" id="fileImport" value="导入">
</div>
<script src="jquery.js"></script>
<script>
    //点击导入按钮,使files触发点击事件,然后完成读取文件的操作
    $("#fileImport").click(function () {
        $("#files").click();
    })
    function fileImport() {
        //获取读取我文件的File对象
        var selectedFile = document.getElementById('files').files[0];
        var name = selectedFile.name;//读取选中文件的文件名
        var size = selectedFile.size;//读取选中文件的大小
        console.log("文件名:"+name+"大小:"+size);

        var reader = new FileReader();//这是核心,读取操作就是由它完成.
        reader.readAsText(selectedFile);//读取文件的内容,也可以读取文件的URL
        reader.onload = function () {
            //当读取完成后回调这个函数,然后此时文件的内容存储到了result中,直接操作即可
            console.log(this.result);
        }
    }
</script>
</body>
</html>