前端input<File;读取本地文本文件 | FileReader

Posted 2022-11-12

主要用到了以下api
​​​FileReader​​​​<input type="file">​​

function addData()
    let input = document.createElement(input);
    input.type = file;
    input.accept = ".jpg, .jpeg, .png, .geojson"
    input.onchange = e => 
        let file = e.target.files[0];
        let info = file.name.split(.);
        let name = info[0] ?? 暂无;
        let format = info?.at(-1);
        // 这里进行格式判断，不同格式不同处理方式
        if (".jpg, .jpeg, .png".includes(format)) 
            console.log(name, format);
            let imgBlob = URL.createObjectURL(file);
            addImageToMap(imgBlob, name);
         else if (.geojson.includes(format)) 
            console.log(name, format);
            var reader = new FileReader();
            reader.onload = (e)=> 
                // 读取内容并转为json格式
                console.log(JSON.parse(e.target.result));
            ;
            reader.readAsText(file);
        

    
    input.click();

演示

箴言：因为这些东西是非常简单的。不要抱怨自己学不会，那是因为你没有足够用心。