前端input<File>读取本地文本文件 | FileReader
主要用到了以下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();
}
演示