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

﹏ヽ暗。殇╰゛Y 2021-11-11 10:42 875阅读 0赞

<!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>

发表评论取消回复

表情：

评论列表（有 0 条评论，875人围观）

还没有评论，来说两句吧...

相关阅读

相关 js 读取文件内容

var openFile = function(event) \{ var input = event;

柔光的暖阳◎/ 2023年06月15日 09:46/ 0 赞/ 21 阅读

相关【Java用法】Java读取本地文件内容，如txt, json等多种文件

本人Java开发一枚，由于本地测试代码会经常用到读取电脑上的文件，然后再进行各种操作，所以干脆记录一下读取的代码以便下次可以直接使用。 package com.bai

- 日理万妓/ 2023年02月20日 07:23/ 0 赞/ 8 阅读

相关 Angular.x读取本地静态json文件（引入json文件使用）

由于项目下拉加载数据过多（城市、行业），所以将数据封装成json数据放存放angular中静态文件的assets目录下， 1. 将json文件放入到assets文件下； 2

迷南。/ 2023年02月14日 15:52/ 0 赞/ 84 阅读

相关 node.js 如何读取json文件内容

最简单的方式： const config = require('./config.json') console.log("name",config.name)

悠悠/ 2022年12月28日 09:05/ 0 赞/ 143 阅读

相关 node.js读取JSON文件

代码如下： let path = "./plays.json"; let fs = require('fs'); let plays = JSON.p

谁借莪１个温暖的怀抱￠/ 2022年12月19日 09:02/ 0 赞/ 295 阅读

相关 vue中读取本地文件内容

其实就是使用 FileReader对象，h5提供的异步api，可以读取文件中的数据。 <input @change="uploadCode($event)" type

深碍√TFBOYSˉ_/ 2022年09月10日 07:17/ 0 赞/ 399 阅读

相关 JS-读取txt文件内容

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">

末蓝、/ 2022年05月13日 01:12/ 1 赞/ 419 阅读

相关 jQuery ajax读取本地json文件

json文件 \{ "first":\[ \{"name":"张三","sex":"男"\}, \{"name":"李四","sex":"男"\}, \{"name":"王武

系统管理员/ 2022年04月02日 05:16/ 0 赞/ 371 阅读

相关 iOS 读取本地Json文件

之前写过类似的方法今天写这个的目的是应对开发过程中面对服务端数据刚定下模型但是接口不通的情况下不耽误客户端开发进度 + (id)getJsonDataJ

港控/mmm°/ 2021年12月16日 18:33/ 0 赞/ 675 阅读

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

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

﹏ヽ暗。殇╰゛Y/ 2021年11月11日 10:42/ 0 赞/ 876 阅读